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

第一个例子不起作用，因为第一行是建立表的维度。第二行大小维度声明违反表格显示的性质。如果必须使用表而不是无表格方法（如浮动div元素），则必须使用colspans才能使显示结果更接近您要实现的效果。

第二个是有效的，因为你将元素分成两个独立的表，所以每个表都用它们各自的第一行建立它们的尺寸。

colspan方法看起来类似于：

＆＃13;

table td {
  border: solid 1px black;
}

＆＃13;

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

＆＃13;

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

1 个答案: