在单个tr中显示同一行中的2列，第二行中的另一列 [英] Displaying 2 columns in a same row and another in 2nd row within a single tr

问题描述

我所做的

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

http://jsfiddle.net/t77remtc/1/

我想在单个<tr>标记中添加3个<td>，以使2 <td>将显示在一行上，而第三个<td>需要在第二行显示，条件是它们必须位于同一<tr>.

I want to add 3 <td> in a single <tr> tag in such a way that 2 <td> will be displayed on a single line and third <td> needs to go on 2nd line, condition is that they must need to be in same <tr>.

很抱歉之前有任何混淆.

Sorry for any confusion earlier.

推荐答案

鉴于您的表结构，您应该可以使用以下样式来实现所需的功能.诀窍是将表转回为块元素，然后对其进行样式设置.请注意，此元素的第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

这篇关于在单个tr中显示同一行中的2列，第二行中的另一列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！