返回目录

37 - 精确控制表格列宽

使用 CSS 实现精确控制表格列宽效果

With table-layout: auto

If we don’t… specify a cell width, they will be assigned one that depends on their contents. Notice how the cell with the more content here is much wider.
If we don’t… specify a cell width, they will be assigned one that depends on their contents. Notice how the cell with the more content here is much wider.
All rows take part in calculating the widths, not just the first one. Notice how the dimensions here are different than the previous example.
If we specify a width, it will not always be followed. I have a width of 1000px …and I have a width of 2000px. Because there’s not enough space for 3000px, they are reduced proportionally, to 33.3% and 66.6% of the total width.
If we prevent word wrapping, the table can become so wide it grows beyond its container. …and text-overflow: ellipsis doesn’t help either.
Large images and blocks of code can also cause the same issue.

With table-layout: fixed