table无法设置td宽度

今天在修改别人的代码的时候突然遇到这么一个问题,在之前的代码中给<table>标签的<td width="25%">设置了宽度,可是当<td>中的内容增多时,依然被撑开了,而不是设定好的25%

于是我试了给<td style="width: 25%">设置样式,在css文件中设置样式,以及在标签内加入一个块级元素的方式,都失败了。。。。。。

只能在网上找寻办法,发现了table有这么一个CSS属性:table-layout

这个属性主要有两个属性值:

  • automatic //默认值,列宽度由单元格内容设定
  • fixed //列宽由表格宽度和列宽度设定

从属性值我们可以知道,在我们不给table设置这个属性时,列宽都是由单元格内容自适应的,设定了属性值fixed之后,我们才可以给列宽设定值来手动更改表格的布局。

不过需要知道的是,自动表格布局在计算布局时由于要自适应内容,所以会把所有的内容都遍历一遍,这样就会很慢。而固定表格的布局时,当浏览器接收到表格的第一行之后就会完成表格的布局,不会再计算后面的内容,也快速了很多。

所以我们最终的解决办法就是给table设置这么一个样式属性,属性值为fixed,然后再给td设置宽度即可生效。