对 table-layout 的错误解决

最新推荐文章于 2023-07-03 15:49:41 发布

原创最新推荐文章于 2023-07-03 15:49:41 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#布局

css 专栏收录该内容

1 篇文章

订阅专栏

本文通过对比两种不同的CSS表布局实现方式，展示了如何使用table-layout属性解决布局偏差问题。当设定为fixed值时，即使单元格内容长度不一致，也能确保各列宽度均匀分布。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里写图片描述

上图中运用了表布局，结果与预期效果（下图）出现了偏差。

这里写图片描述
首先看一下错误布局的代码。

  display: table;
  width: 860px;
  margin: 20px auto auto auto;
  padding-bottom: 30px;
  border-bottom: 2px solid #993399;
  border-spacing: 30px;

再来看一下正确布局的代码。

  display: table;
  width: 860px;
  margin: 20px auto auto auto;
  padding-bottom: 30px;
  border-bottom: 2px solid #993399;
  border-spacing: 30px;
  table-layout: fixed;

可以看出，两段代码唯一的差别是 table-layout 属性。在第一段代码中， table-layout 属性未进行设置，所以它的值为默认的 automatic ，也就是自动布局。在这种情况下，如果未对单元格设置宽度，单元格宽度会由单元格内容确定。由于右下角的单元格内文字更多，所以最后一列的宽度更宽，进而导致了中心一列单元格的偏移。

如果将 table-layout 设定为 fixed , 即固定布局。浏览器会在忽略单元格内容的情况下，根据表格宽度平均分配列宽，这样就改变了中心列偏移情况。

PS：以上讨论是在设定好整个表格宽度的基础上展开的。