将最后一个 td 作为行

Question

<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

用 colspan="3" 新建一行。此外，colspan="1" 是默认值，因此您无需使用它来混淆标记。

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

Answer 2

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

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>

将最后一个 td 作为行

Make last td as row

html

css

html-table