table中设置th宽度失效解决办法
HTML
2024-05-03 15:26:31
前端开发中关于table的使用是极为频繁的标签,table标签常见于数据展示等情况下使用。
本篇文章介绍我们在使用table时设置th宽度失效要如何解决。
关于该问题,我们需要先来了解table-layout属性
table-layout属性值及说明
automatic:默认。列宽度由单元格内容设定。
fixed:列宽由表格宽度和列宽度设定。
inherit:规定应该从父元素继承 table-layout 属性的值。
从上述关于table-layout属性说明中,你是否已经发现了问题。即默认的列宽度由单元格内容设定而非是我们设定的宽度。
将table-layout属性值改为fixed,列宽由表格宽度和列宽度设定。
<table style="table-layout:fixed;" class="order_table" border="0" cellspacing="0" cellpadding="0">
<tr>
<th align="left" width="550">下单信息</th>
<th align="center" width="150">金额/数量</th>
<th align="center">备注</th>
<th align="center">游客</th>
<th align="center">创建时间</th>
<th align="center" width="120">操作</th>
</tr>
</table>
在table上配置table-layout属性值fixed,让列宽度由表格宽度和列宽度设定即可。
六月初字帖坊小程序
你想要的字帖模板及工具,这里都有!
881篇文章
1097人已阅读