html - 每行不同的表格单元格宽度

Question

我想每行有不同的单元格 width 但似乎无法巧妙地实现这一点:

例如，这是行不通的:

.tg {
  width: 100%
}
.tg td {
  border-style: solid;
  border-width: 1px
}

<table class="tg">
  <tr>
    <td width="80%">Cell 1</td>
    <td width="20%">Cell 2</td>
  </tr>
  <tr>
    <td width="20%">Cell 1</td>
    <td width="80%">Cell 2</td>
  </tr>
</table>

但这将:

.tg {
  width: 100%
}
.tg td {
  border-style: solid;
  border-width: 1px
}

<table class="tg">
  <tr>
    <td width="80%">Cell 1</td>
    <td width="20%">Cell 2</td>
  </tr>
</table>
<table class="tg">
  <tr>
    <td width="20%">Cell 1</td>
    <td width="80%">Cell 2</td>
  </tr>
</table>

Answer 1

第一个示例将不起作用，因为第一行正在建立表的维度。第二行大小维度声明违背了表格显示的性质。如果您必须使用表格而不是 float div 元素等无表格方法，则必须使用 colspans 来使显示结果更接近您想要实现的结果。

第二个之所以可行，是因为您将元素拆分为 2 个单独的表格，因此每个表格都使用各自的第一行建立其维度。

colspan 方法看起来类似于:

table td {
  border: solid 1px black;
}

<table>
  <tr>
    <td width="25%">Cell</td>
    <td width="25%">Cell</td>
    <td width="25%">Cell</td>
    <td width="25%">Cell</td>
  </tr>
  <tr>
    <td width="25%">Cell</td>
    <td width="25%" colspan="3">Cell</td>
  </tr>
  <tr>
    <td width="25%" colspan="3">Cell</td>
    <td width="25%">Cell</td>
  </tr>
  <tr>
    <td width="25%">Cell</td>
    <td width="25%">Cell</td>
    <td width="25%">Cell</td>
    <td width="25%">Cell</td>
  </tr>
</table>