如何在 2018 年的固定布局表中使列自动宽度

Question

我相信width: 1px; white-space: nowrap; 的伎俩以前有效，但现在似乎不再有效了？参考。 CSS table column autowidth（那里的表格也是固定布局的，但那是在 2011 年）

这里是 HTML 和 CSS：

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

td,
th {
  border: 1px solid #D5D5D5;
  padding: 15px;
}

.auto {
  width: 1px;
  white-space: nowrap;
}

<table cellspacing="0" cellpadding="0" border="0">
  <thead>
    <tr>
      <th>Column 1 even width</th>
      <th>Column 2 even width</th>
      <th>Column 3 even width</th>
      <th class="auto">Auto</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
      <td class="auto">Data4</td>
    </tr>
  </tbody>
</table>

我在下面的 jsfiddle 中也有一个示例设置：

http://jsfiddle.net/hCkch/21/

如何根据内容使最后一列自动宽度，而其他列尊重table-layout: fixed？

注意：上面给出的三列只是一个例子。因此，请不要硬编码答案以使每列宽度为 100/3%。这是一个一般性问题，答案应该适合宽度均匀的 n 列，但最后一列会根据内容自动宽度。

Answer 1

正如 cmets 中所提到的，我知道要跨浏览器工作的唯一方法是摆脱 table-layout: fixed; 并设置剩余列的宽度。固定布局对很多事情都有好处，但根据内容自动计算似乎不是其中之一。

table {
  width: 100%;
}

td, th {
  border: 1px solid #D5D5D5;
  padding: 15px;
  width: 33.33%
}

.auto {
  white-space: nowrap;
}

<table cellspacing="0" cellpadding="0" border="0">
  <thead>
    <tr>
      <th>Column 1 even width</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th class="auto">Auto</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
      <td>Data4</td>
    </tr>
  </tbody>
</table>

我知道您已澄清您不想要标记特定的规则，但实际上它确实实现了您的目标，即您事先知道要处理多少列。一般来说，这不应该是令人望而却步的。

另一种可能的解决方法是事后使用 js 为客户端分配宽度：

$(document).ready(function() {
  var width = 100 / $('table tr:first th:not(.auto)').length;
  var cols = $('table th:not(.auto)');
  cols.css('width', width + '%');
});

table {
  width: 100%;
}

td, th {
  border: 1px solid #D5D5D5;
  padding: 15px;
}

.auto {
  white-space: nowrap;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellspacing="0" cellpadding="0" border="0">
  <thead>
    <tr>
      <th>Column 1 even width</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th class="auto">Auto</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
      <td>Data4</td>
    </tr>
  </tbody>
</table>

最后，我要提一下 min-content 的 Firefox 特定实现，它实际上完全符合您的要求。不幸的是，它只适用于 Firefox：

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

td, th {
  border: 1px solid #D5D5D5;
  padding: 15px;
}

.auto {
  width: -moz-min-content;
  white-space: nowrap;
}

<table cellspacing="0" cellpadding="0" border="0">
  <thead>
    <tr>
      <th>Column 1 even width</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th class="auto">Auto</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
      <td>Data4</td>
    </tr>
  </tbody>
</table>

Answer 2

使用表格布局，您需要设置表格第一行中单元格的宽度 (https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout)。您还需要为旨在自动扩展的最后一列添加 100% 的宽度。这是您的 jsfiddle 的编辑： http://jsfiddle.net/jessbodie/hCkch/31/

<table cellspacing="0" cellpadding="0" border="0">
  <thead>
    <tr>
      <th class="col1st">Column 1 even width</th>
      <th class="col2nd">Column 2 even width</th>
      <th class="col3rd">Column 3 even width</th>
      <th class="auto">Auto</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
      <td class="auto">Data4</td>
    </tr>
  </tbody>
</table>

---

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

td, th {
  border: 1px solid red;
  padding: 15px;
}

.col1st {
  width: 100px;
}

.col2nd {
  width: 100px;
}

.col3rd {
  width: 100px;
}

.auto {
  width: 100%;
  white-space: nowrap;
}

为了使前 n 列具有相同的宽度，在 SASS 中，您可以使用 calc 函数来计算宽度。