Html 2018年如何在固定布局表中自动设置列宽

我相信

宽度：1px；空白：nowrap技巧以前有效，但现在似乎不再有效了？参考（表中也有固定布局，但这要追溯到2011年）

以下是HTML和CSS：


表格{
表布局：固定；
宽度：100%；
}
运输署，
th{
边框：1px实心#d5d5；
填充：15px；
}
.自动{
宽度：1px；
空白：nowrap；
}

第1列偶数宽度
第2列偶数宽度
第3列偶数宽度
自动的
数据1
数据2
数据3
数据4
如评论中所述，我所知道的跨浏览器工作的唯一方法是摆脱
表格布局：固定
并设置其余列的宽度。固定布局对很多事情都有好处，但基于内容自动计算似乎不是其中之一


表格{
宽度：100%；
}
td，th{
边框：1px实心#d5d5；
填充：15px；
宽度：33.33%
}
.自动{
空白：nowrap；
}

第1列偶数宽度
第2栏
第3栏
自动的
数据1
数据2
数据3
数据4
使用表格布局，您需要设置表格第一行中单元格的宽度（）。您还需要为要自动展开的最后一列添加100%的宽度。以下是您的JSFIDLE的编辑：

为了使前n列具有相同的宽度，在SASS中，可以使用calc函数计算宽度
 删除
表格布局：已修复
？根据你的小提琴，我不确定这对你有什么好处…@billynoah你是什么意思？这需要使列的间距均匀。也许我遗漏了什么，但我不明白为什么你需要一个固定的布局才能到达那里。还有一个问题是，
width:1px
技巧只适用于自动布局。这不是你想要的吗？看看这个：你会看到其他三列有不同的宽度。然后尝试添加回固定布局并查看。感谢提供详细的示例。我仍然希望有一个像firefox这样的非编程解决方案，而不必求助于js。我将等待另一个答案，看看是否有其他人知道谁可以分享这个把戏。谢谢，但如果我已经硬编码（或SASS计算）了其他每列的宽度，那么使用
表布局：修复
？性能有何意义。根据MDN：“在“固定”布局方法下，一旦下载并分析了第一个表行，就可以渲染整个表。这可以比“自动”布局方法加快渲染时间。”
<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;
}