Question

根据规范，固定表格布局不适用于设置为width的{{1}}：

17.5.2.1固定表格布局

使用此（快速）算法，表格的水平布局确实如此   不依赖于细胞的内容;它只取决于   table的宽度，列的宽度以及边框或单元格间距。

可以使用'width'明确指定表格的宽度   属性。值为'auto'（对于'display：table'和'display'：   inline-table'）表示使用自动表格布局算法。   但是，如果表是块级表（'display：table'）in   正常流量，UA可能（但不必）......

是否有任何黑客可以让它工作（使用纯CSS ）？

我拥有的内容：auto对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;
}

Answer 1

只需为td指定一个百分比宽度 - 您不需要table本身的任何CSS规则（请参阅代码段）

.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>

固定表格布局，自动宽度

1 个答案: