table

作者: 一沭丶 | 来源:发表于2019-03-07 16:09 被阅读0次

html:

<table class="table">
    <tr class="tr">
        <th class="td">标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1</th>
        <th class="td">标题2</th>
        <th class="td">标题3</th>
        <th class="td">标题3</th>
        <th class="td">标题3</th>
        <th class="td">标题3</th>
    </tr>
    <tr class="soa-tr">
        <td class="td">内容1</td>
        <td class="td">内容2</td>
        <td class="td">标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3标题3</td>
        <td class="td">标题3标题3标题3标题3标题3标题3</td>
        <td class="td">标题3</td>
        <td class="td">内容3</td>
    </tr>
</table>

css:

table {
    border-collapse:collapse;
    border-spacing:0;
}

table, caption, tbody, tfoot, thead, tr, th, td {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}


.table {
    width: 100%;
    border-top: 1px solid #c5c5c5;
    border-left: 1px solid #c5c5c5;
    color: #666;
}

.td {
    border-right: 1px solid #c5c5c5;
    padding: 0 10px;
    width: 16.66%;
}

.tr {
    border-bottom: 1px solid #c5c5c5;
}

.tr:nth-of-type(2n+1) {
    background-color: #f4f4f4;
}

相关文章

网友评论

      本文标题:table

      本文链接:https://www.haomeiwen.com/subject/gtthpqtx.html