具有自动宽度的固定表格布局

Question

根据规范，固定表格布局不适用于将width 设置为auto：

17.5.2.1 固定表格布局

使用这种（快速）算法，表格的水平布局不会 不依赖于单元格的内容；它只取决于 表格的宽度、列的宽度以及边框或单元格间距。

表格的宽度可以用'width'显式指定 财产。 'auto' 的值（对于 'display: table' 和 'display: inline-table') 表示使用自动表格布局算法。 但是，如果表是块级表（'display:table'） 正常流程，UA 可以（但不必）......

是否有任何 hack 让它正常工作（使用 纯 CSS）？

我所拥有的：table-layout: fixed 对 width: auto 无效：

table{
  /* those two won't work togheter */
  table-layout: fixed;
  width: auto;
}

td{
  /* pure visual purpose */
  border: 1px solid black;
  padding: 10px;
}

<table>
	<tr>
		<td>Mid long text</td>
		<td>The very longest text</td>
		<td>Short</td>
	</tr>
</table>

我想要得到：所有表格单元格的宽度都设置为最宽的：

// width of widest table cell (in px)
var max = 0;

// get width of widest table cell (in px)
$('table td').each(function(){
	max = Math.max(max, $(this).width());
});

// set width of all cells to the width of widest one
$('table td').each(function(){
	$(this).css('width', max +'px');
});

table{
  /* those two won't work togheter */
  table-layout: fixed;
  width: auto;
}

td{
  /* pure visual purpose */
  border: 1px solid black;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
	<tr>
		<td>Mid long text</td>
		<td>The very longest text</td>
		<td>Short</td>
	</tr>
</table>

Answer 1

只需为td 分配一个百分比宽度 - 然后您就不需要table 本身的任何 CSS 规则（参见 sn-p）

.container {
  background-color: #0fa;
  }
table {
  background-color: #fa0;
  }
td{
  border: 1px solid black;
  padding: 10px;
  width: 33%;
}

<div class="container">
<table>
	<tr>
		<td>Mid long text</td>
		<td>The very longest text</td>
		<td>Short</td>
	</tr>
</table>
  </div>