html - 具有对齐列的子表

Question

这是我要实现的目标:

我需要保护边界。下表应从主表第二列宽度的一半左右开始。

这是我目前所拥有的:

table {
  border-collapse: collapse;
  width: 100%;
}

.t1 td,
.t1 th,
td.t1,
th.t1 {
  border: 1px solid grey;
}

<div>
  <table>
    <tr class="t1">
      <th>Item</th>
      <th colspan="2">Description</th>
      <th>Sub total</th>
    </tr>
    <tr class="t1">
      <td>1</td>
      <td colspan="2">some description</td>
      <td>100</td>
    </tr>

    <tr>
      <th></th>
      <th></th>
      <th class="t1">Sub total</th>
      <td class="t1">100</td>
    </tr>
  </table>
</div>

https://jsfiddle.net/cebga04t/

但是“子表”中的第二个不可见列太窄，无法弄清楚如何在不影响其他列的情况下使其成为 colspan=2 的 50%。

Answer 1

添加 table-layout: fixed; 应该可以完成工作。在这种情况下，水平布局仅取决于表格的宽度和列的宽度，而不是单元格的内容。

在这里你可以找到更多关于它的信息

https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

所以你的 table 之后看起来像这样。

table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}

.t1 td,
.t1 th,
td.t1,
th.t1 {
  border: 1px solid grey;
}

<div>
  <table>
    <tr class="t1">
      <th>Item</th>
      <th colspan="2">Description</th>
      <th>Sub total</th>
    </tr>
    <tr class="t1">
      <td>1</td>
      <td colspan="2">some description</td>
      <td>100</td>
    </tr>

    <tr>
      <th></th>
      <th></th>
      <th class="t1">Sub total</th>
      <td class="t1">100</td>
    </tr>
  </table>
</div>