且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

在单个tr中显示同一行中的2列,第二行中的另一列

更新时间:2022-12-09 23:21:35

鉴于您的表结构,您应该可以使用以下样式来实现所需的功能.诀窍是将表转回为块元素,然后对其进行样式设置.请注意,此元素的第n个子元素基于2列-如果您在第二个示例中有3列,则该元素为3n+1

Given your table structure you should be able to achieve what you want by using the following styles. The trick is to turn the table back into block elements and then style them. Please note the nth child element of this is based on 2 columns - if you had three columns as in your second example, then it would be 3n+1

table, table * {
    display:block;
    box-sizing:border-box;
}
table {
    padding:3px 0 0 3px;
    border: 1px solid black;
    width:299px;
}
table:after {
    content:'';
    display:block;
    height:0;
    clear:both;
}
th, td {
    border: 1px solid black;
    width:144px;
    margin-bottom:3px;
    margin-right:3px;
    float:left; 
    
}
th:nth-child(2n + 1), td:nth-child(2n + 1) {
    clear:left;
}
.newline {
    float:none;
    width:291px;
}

<table>
    <tr>
        <th>Month</th>
        <th colspan="2">Savings</th>
    </tr>
    <tr>
        <td>January</td>
        <td colspan="2">$100</td>
    </tr>
    <tr>
        <td>February</td>
        <td colspan="2">$100</td>
    </tr>
    <tr>
        <td>A: $10</td>
        <td>B: $15</td>
        <td class="newline">Sum: $25</td>
    </tr>
</table>

请注意,我已在上表中添加了colspans,以使您的HTML在禁用CSS时有效

Please note I have added colspans to the above table to make your html valid for when css is disabled