浏览器忽略 table-layout:fixed

Question

我无法实现固定的 table 布局。如果 table 单元格的内容多于容纳不下的内容，则 table 将重新布局，就好像 table 布局设置为自动一样。这是HTML代码

<!DOCTYPE html>
<html>
  <head>
    <title>Table test</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="<path here>" /> 
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th class="number">Number</th>
          <th class="name">Name</th>
          <th class="type">Type</th>
          <th class="comment">Comment</th>
          <th class="buttons"></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>42</td>
          <td>This name is really long and is supposed to be truncated</td>
          <td>Normal</td>
          <td>I don't know what to say</td>
          <td><button>Edit...</button></td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

CSS是

table {
  border-collapse: collapse;
  table-layout: fixed;
}

th {
  font-weight: bold;
  text-align: left;
}

td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

tr {
  border-top: 1px solid #000000;
  border-bottom: 1px solid #000000;
}

th.number {
  width: 6rem;
}

th.name {
  width: 15rem;
}

th.type {
  width: 17rem;
}

th.comment {
  width: 15rem;
}

th.buttons {
  width: 17rem;
}

这里是fiddle。问题是第 2 列 ("name") 会增加，直到内容适合为止。我做错了什么？

Answer 1

您需要在 table 元素上设置 width，因为 Fixed table layout 的定义说：“table 的宽度可以用'width'属性。 'auto' 的值（对于 'display: table' 和 'display: inline-table'）意味着使用自动 table 布局算法。然而，如果 table 是正常流中的块级 table ('display: table')，UA 可以（但不必）使用 10.3.3 的算法来计算宽度并应用固定的 table 布局，即使指定的宽度为 'auto'。” （请注意，auto 是默认值。）

这很尴尬，但要获得固定布局，您需要添加

table { width: calc(40rem + 10px); }

此处40rem是您为列设置的宽度之和，10px容纳单元格中的默认填充（1px在每个单元格的左侧和右侧).

旧版浏览器不支持 calc 结构，但您已经在使用 rem 单元承担风险了。

浏览器忽略 table-layout:fixed

Browser ignores table-layout:fixed

html

css

html-table