在CSS中设置表子标题的宽度

Question

​

​

我有一张像上面所示的桌子，它同时使用了大跨度和大跨度。我想修复所有的列宽。我可以做第一和最后(否和备注)，我可以设置类型的宽度。如何指定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

将表布局属性更改为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>

​

Answer 2

更改表-布局:自动

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