在单个 tr 内显示同一行中的 2 列和第二行中的另一列答案

【问题标题】：Displaying 2 columns in a same row and another in 2nd row within a single tr在单个 tr 内显示同一行中的 2 列和第二行中的另一列
【发布时间】：2015-05-13 10:46:40
【问题描述】：

我做了什么，

<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>。

抱歉之前有任何混淆。

【问题讨论】：

仍在使用 IE8 - 拒绝它
这是你要找的东西吗：jsfiddle.net/t77remtc/3
你能解释一下你为什么想要这样的东西吗？这没有意义？
连IE8都用不上怎么查？
在 chrome 和 IE9 中运行良好。两者都在同一行。

标签： javascript jquery html css

【解决方案1】：

鉴于您的表结构，您应该能够通过使用以下样式来实现您想要的。诀窍是将表格变回块元素，然后设置它们的样式。请注意，它的第 n 个子元素基于 2 列 - 如果您在第二个示例中具有 3 列，那么它将是 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>

请注意，我在上表中添加了 colspan，以使您的 html 在 css 被禁用时有效

【讨论】：

【解决方案2】：

这不是 IE8 错误，而是您的标记不正确。

您需要像这样合并顶部的列<td colspan="1" rowspan="3"></td>

   <tr>
       <td colspan="2">Sum: $25</td>
    </tr>

http://jsfiddle.net/t77remtc/2/

新版本：http://jsfiddle.net/t77remtc/13/

【讨论】：