对 table-layout 的错误解决

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

首先看一下错误布局的代码。

  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：以上讨论是在设定好整个表格宽度的基础上展开的。