Question

我做了什么，

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

我想在单个<td>代码中添加3个<tr>，以便2 <td>将显示在一行中，第三个<td>需要显示在第二行，条件是他们必须在同一个<tr>。

对于之前的任何混淆感到抱歉。

Answer 1

这不是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/

Answer 2

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

String temp = new String();

请注意我已将colspans添加到上表中，以使您的html在禁用css时有效

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

2 个答案: