今天我想知道 HTML 表格中的多余空间（超出内容所请求的范围）是如何在各列之间分割的。令人惊讶的是，即使经过大量谷歌搜索，我也找不到答案。所以我很快就模拟了最简单的页面并对其进行了测试。
<html><head>
<style type="text/css">
td, div{
border: 1px solid black;
}
</style>
</head><body>
<table width=500>
<tr>
<td><div style="width: 200px;">Big td</div></td>
<td><div style="width: 100px;">Small td</div></td>
</tr>
</table>
</body></html>
The result (in google chrome) looks like this:
基于此，浏览器似乎按比例分配额外空间。为列提供与它们最初请求的空间量成比例的额外空间百分比。考虑到这一点，这篇文章有三个目的：
您可以通过应用 Flexbox CSS 规则来更改水平空间分配。查看http://the-echoplex.net/flexyboxes/ http://the-echoplex.net/flexyboxes/并使用“flex”属性中的第一个数字。这个数字决定了哪些元素可以获得多少额外空间以及多少。