100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > css表格宽度设置无效

css表格宽度设置无效

时间:2023-03-29 04:15:52

相关推荐

css表格宽度设置无效

table-layout: fixed

table-layout: fixed,table和td设置宽度有效,但在第一行有合并列的情况时,列宽会被均分,从而导致td设置宽度无效(table宽度仍然有效)。

table-layout: fixed的表格,各列宽度由第一行决定,后面指定的宽度会被忽略,当第一行合并后,所有列宽度会被均分。

解决方法:在<table>之后添加代码<col style="width: 20%" /><col style="width: 20%" /><col style="width: 20%" />或者<colgroup><col style="width: 20%" /><col style="width: 20%" /><col style="width: 20%" /></colgroup>

table-layout: auto

table-layout: auto导致table和td设置宽度都无效,表格宽度是根据内容自动无限扩展的,从而导致table宽度超模(超出父组件)。

解决方法:td内的文字全部用一层元素(p、span、div都可以)包裹一下,然后设置包裹层的宽度或最大宽度(width或max-width)。

如果td本身设置了宽度那么可以使用js动态设置包裹元素的宽度:

var ps = document.querySelectorAll("table td p"); ;for(let me of ps){let tdObj=me.parentNode;let tdWidth=tdObj.getAttribute("width");if(tdWidth!=null&&tdWidth>0){tdWidth=tdWidth+"px";}else{tdWidth=tdObj.style.width;if(tdWidth==null||tdWidth<=0){tdWidth="600px";}}me.style.maxWidth=tdWidth;}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。