跳到主要内容

精确控制表格列宽

现在浏览器的布局几乎不会再用表格,但是在涉及统计数据的展示时,仍然会使用表格。

表格有个属性叫 table-layout ,它决定表格的单元格、行和列如何布局。

默认值是auto,这种情况下,浏览器对表格有更高的控制权,会采用自动表格布局算法,简单讲就是浏览器会根据表格的内容,动态设置单元格的尺寸。这会导致表格最终展示的样子,和我们预设的不一样。比如把一个单元格设定一个非常大的,超过页面视区的宽度,实际展示的宽,最多到父元素的边缘。

这个属性还有另外一个值 fixed,这会让用户对表格拥有更高的控制权,表格布局的方式也变得简单起来:

  1. 在第一行中,单元格的宽度分配将决定表格的宽度布局,第一行之后的内容不会再改变布局。
  2. 在第一行中,如果单元格有宽度定义,则先分配它们所需的宽度,然后剩余的宽度平均分配给没有宽度定义的单元格。