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;
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值