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

【问题标题】：Setting the Width of a Table Subheading in CSS在 CSS 中设置表格副标题的宽度
【发布时间】：2019-03-26 12:00:04
【问题描述】：

我有一张如上图所示的表格，它同时使用 colspan 和 rowspan。我想修复所有的列宽。我可以做第一个和最后一个（No和Remark），我可以设置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？

【问题讨论】：

拜托！提及您到目前为止所尝试的内容。
寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。见How to create a Minimal, Complete, and Verifiable example
添加了 HTML 和 CSS sn-ps。
也许你的答案可以在这里找到？ stackoverflow.com/questions/14765817/…

标签： html css html-table

【解决方案1】：

将表格布局属性更改为自动：

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>

【讨论】：

【解决方案2】：

更改表格布局：自动

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

【讨论】：