html - 将最后一个 td 作为行

Question

请看https://jsfiddle.net/wYA9K/55/

<table>
<thead>
    <th colspan="1" style="width: 10%">TH1</th>
    <th colspan="1" style="width: 60%">TH2</th>
    <th colspan="1" style="width: 30%">&nbsp;</th>
    <th>&nbsp;</th>  <-- what should i do??
</thead>
<tr>
    <td colspan="1" style="width: 10%">a</td>
    <td colspan="1" style="width: 60%">b</td>
    <td colspan="1" style="width: 30%">c</td>
    <td>UNDERNEATH SPANNING WHOLE ROW</td> <-- what should i do??
</tr>

我正在尝试使最后一个 td 扩展整行。 有没有可能做到这一点？

Answer 1

如果您希望每行的最后一列出现，并且您愿意在所有其他列上包含明确的样式，您可以 float 它们:

td, th {
  display: block;
  float: left;

  /* for visibility only */
  border: 1px solid grey;

  /* so we don't run out of space with 100% total width */
  box-sizing: border-box;
}

td:last-child, th:last-child {
  width: 100%;
}

<table>
  <thead>
    <tr>
      <th colspan="1" style="width: 10%">TH1</th>
      <th colspan="1" style="width: 60%">TH2</th>
      <th colspan="1" style="width: 30%">&nbsp;</th>
      <th>&nbsp;</th>
    </tr>
  </thead>
  <tr>
    <td colspan="1" style="width: 10%">a</td>
    <td colspan="1" style="width: 60%">b</td>
    <td colspan="1" style="width: 30%">c</td>
    <td>UNDERNEATH SPANNING WHOLE ROW</td>
  </tr>
  <tr>
    <td colspan="1" style="width: 10%">a</td>
    <td colspan="1" style="width: 60%">b</td>
    <td colspan="1" style="width: 30%">c</td>
    <td>UNDERNEATH SPANNING WHOLE ROW</td>
  </tr>
</table>