HTML表格设置td宽度失效问题

最新推荐文章于 2022-11-22 15:14:17 发布

syousetu

最新推荐文章于 2022-11-22 15:14:17 发布

阅读量4.9k

点赞数 1

分类专栏： html 文章标签： html5 tablet

本文链接：https://blog.youkuaiyun.com/syousetu/article/details/108256308

版权

2 篇文章

订阅专栏

在HTML中，css直接设置td宽度有时无效，可通过设置table-layout:fixed解决。table-layout属性决定了表格单元格、行、列的布局算法。当遇到合并列的情况，可以使用col标签为表格定义列属性，避免列宽平均化的问题。

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

问题一

css设置table中td的宽度并不起作用

设置table-layout:fixed

table-layout属性用来显示表格单元格、行、列的算法规则

值	描述
automatic	默认。列宽度由单元格内容设定。
fixed	列宽由表格宽度和列宽度设定。
inherit	规定应该从父元素继承table-layout属性的值

如果对table设置 table-layout:fixed 样式后，发现表格中有一行合并过，其它没有合并的行的列宽会平均化，对列宽的设置会失效。

在tbody前面加：

<col style="windth:10%;"/>
<col style="windth:10%;"/>
<col style="windth:10%;"/>

根据自己的需求来设置列宽

为表格中一个或多个列定义属性值。
如需对全部列应用样式，标签很有用，这样就不需要对各个单元和各行重复应用样式了。
您只能在table或colgroup元素中使用标签

属性	值	描述
align	right left center justify char	规定与col元素相关的内容的水平对齐方式
char	character	规定根据哪个字符来对齐与col元素相关的内容
charoff	number	规定第一个对齐字符的偏移量
span	number	规定col元素应该横跨的列数
valign	top middle bottom baseline	定义与col元素相关的内容的垂直对齐方式
width	pixels % relative_length	规定col元素的宽度