具有对齐列的子表

Question

这是我想要实现的目标：

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

这是我到目前为止所拥有的：

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

https://jsfiddle.net/cebga04t/

但是＆＃34;子表＆＃34;中的第二个不可见列;太狭隘，无法弄清楚如何使其50％的colspan = 2而不影响其他列。

Answer 1

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

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

  

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

所以你的桌子之后会是这样的。

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;