如何左对齐除最后一个以外的所有表格单元格？答案

【问题标题】：How to left-align all table cells but the last one?如何左对齐除最后一个以外的所有表格单元格？
【发布时间】：2017-04-11 02:59:16
【问题描述】：

我有一张 1 行 5 列的表格。我已将这 5 列的宽度固定为某些已知值（150 像素、200 像素等）。我还为每个设置了左边距。

我希望表格加宽并占据其父级的整个宽度。因此，我将其宽度设置为 100%。当表格的宽度超过 5 列的总宽度和边距时，它们会在表格中展开，并在它们之间留下空隙。

但是，我希望这 5 列保持在左侧。

为此，我添加了第 6 列并将其宽度设置为 auto，希望它将前 5 列适当地向左推并占据剩余空间。它适用于 Firefox 和 Chrome。但它在 IE 中不起作用。在 IE 中，5 列仍然均匀地分布在整个表格中。

我尝试将第 6 列的宽度设置为 100% 而不是自动。但问题是，它正在清除 5 列的左边距！有点像，100% 列将 5 列向左推太多，以至于它们的边距消失了！

我希望保持前 5 列的内边距、边距和宽度，但将其推到左侧，但表格应展开与其父级一样宽。

表格的背景图片需要显示在 5 列之外。

有些人可能会建议我将背景移到表的父级，但我不能 - 相信我的话：D

如何让它在 Firefox、Chrome 和 IE 中运行？

谢谢。

这是链接：http://test.greedge.com/table/table.php。在 FF 和 IE 中试试

【问题讨论】：

看，这就是为什么当人们说 CSS 布局很难，你应该只使用表格时，我会发笑。我一直无法弄清楚表格用来布置自己的规则。
@Paul 这仍然是方式更难以在纯 CSS 中布局。
某些方面是（让每个单元格与其他单元格的高度相同）。我认为水平布局会起作用：五个元素以固定宽度向左浮动，并将overflow: hidden' 分配给第六个元素。这绝对没有表格那么明显。

【解决方案1】：

编辑： 解决方案很简单：将&nbsp; 添加到表中最后一列的一个 td 中。内联表格的表格单元格不会被渲染，因为它不包含任何内容。因此，最后一个单元格也不包含任何内容，不会被渲染，其他单元格必须在它们之间分配可用空间。

我不知道哪个浏览器在这里做正确的事情，所有 IE（包括 8 个）都不渲染列，所有其他浏览器都这样做。

旧答案：

根据the CSS 2.1 spec，列不应该有边距：

右边距，左边距

适用于：除了table-caption、table和inline-table以外的table显示类型的元素之外的所有元素

您需要在单元格内使用填充。

在您描述的场景中，自动列应该可以在任何浏览器中工作（只是不要指定任何宽度）。你能发布一个不起作用的表格的在线示例吗？

【讨论】：

我可能需要一些时间才能发布一个您可以查看的在线帖子。设置完成后我会通知您。
@iam 好的。在你这样做之前，也许第二次检查你是否确实给了所有td s 固定宽度，而第 6 次根本没有宽度。那应该可以正常工作。
@iam 也先删除边距，可能是 IE（错误地）解释了它们。
为了符合要求，我用填充替换了边距。 IE 仍然以不同的方式解释“auto”，并且它们散布在桌子上。我又检查了一遍。自动间距在 IE 中不起作用。列仍然分布在整个表格中。
@iam-developer 真的，真的很奇怪。如果您将其发布在网上，我会在白天的某个时间点看一下。（格林威治标准时间:)