每行中具有不同单元格数的 HTML 表格 : how to space the cells evenly in their row?

Question

我有一个 HTML 表格，其中每一行的列数可能不同。尽管如此，我希望这些列在它们的行中均匀分布。 (例如，如果我的第一行包含 2 列，则每列应占表格总宽度的 50%；如果第二行有 3 列，则每列应占表格总宽度的 ~33%。 )

此外，我希望表格具有容器的宽度(因此可能在 CSS 中使用 width: 100%；但问题是此属性告诉表格拆分仅基于第一行中的内容均匀列)。容器宽度可能会有所不同，这就是我必须使用百分比的原因。

我还尝试用 div 自己制作表格，并用百分比指定每个“cell-div”的宽度，但此解决方案并不能在每个浏览器上提供良好的结果:有时，当没有更多时行上的空间，一行的最后一个“cell-div”在它下面。 (我必须指定一些奇怪的宽度，例如 49.99998% 或 33.333233% 因为我的边框也需要一些空间。)

Answer 1

听起来您并没有真正使用 table 元素来显示表格数据，只是为了对齐。获得所需结果的一种方法是让每一行成为自己的表格并设置宽度。每行将在表格宽度上均匀分布单元格。您可能需要添加更多 CSS 格式，以使其按照您想要的方式运行。

你可以在 http://jsfiddle.net/RxSe5/1/ 看到这个.