在CSS中设置表格副标题的宽度

Question

我有一张表格，如上图所示，它同时使用colspan和rowspan。我想修复所有列宽。我可以执行第一个和最后一个（否和备注），并且可以设置Types的宽度。如何指定A，B和C的宽度？

我尝试为单元格A，B和C提供CSS类并设置单独的宽度，但这没有任何效果。宽度始终受以下单元格中任何内容的控制。

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

th, td {
  border:solid 1px #000;
  padding:.5em;
}

.no {
  width:10%;
}

.type {
  width:50%;
}

.remark {
  width:40%;
}

/* these don't work */

.type-a {
  width:10%;
}

.type-b {
  width:15%;
}

.type-c {
  width:25%;
}

<table>
  <thead>
    <tr>
      <th rowspan="2" class="no">No</th>
      <th colspan="3" class="type">Type</th>
      <th rowspan="2" class="remark">Remark</th>
    </tr>
    <tr>
      <th class="type-a">A</th>
      <th class="type-b">B</th>
      <th class="type-c">C</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

是否可以不将固定宽度的div放在单元格内？

Answer 1

更改表格布局：自动

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

Answer 2

将table-layout属性更改为auto：

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

th, td {
  border:solid 1px #000;
  padding:.5em;
}

.no {
  width:10%;
}

.type {
  width:50%;
}

.remark {
  width:40%;
}

/* these don't work */

.type-a {
  width:10%;
}

.type-b {
  width:15%;
}

.type-c {
  width:25%;
}

<table>
  <thead>
    <tr>
      <th rowspan="2" class="no">No</th>
      <th colspan="3" class="type">Type</th>
      <th rowspan="2" class="remark">Remark</th>
    </tr>
    <tr>
      <th class="type-a">some long text to see the width remains the same </th>
      <th class="type-b">B</th>
      <th class="type-c">C</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>