Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/84.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何适应不同表格的td宽度?_Javascript_Html_Css - Fatal编程技术网

Javascript 如何适应不同表格的td宽度?

Javascript 如何适应不同表格的td宽度?,javascript,html,css,Javascript,Html,Css,实际td的宽度是一个实数,但我不知道offsetWidth是否只返回整数。是否有其他属性以实数形式返回单元格的长度?在chrome的开发工具中,按CTRL+SHIFT+C快捷键查看长度,这是不同的。如果我使用jQuery,我可以更容易地获得长度吗 函数fitWidth(选择器1、选择器2){ console.log('fitWidth is executed'); 让tableHeadElements=document.getElementsByClassName(选择器1); 让tableB

实际td的宽度是一个实数,但我不知道
offsetWidth
是否只返回整数。是否有其他属性以实数形式返回单元格的长度?在chrome的开发工具中,按CTRL+SHIFT+C快捷键查看长度,这是不同的。如果我使用jQuery,我可以更容易地获得长度吗

函数fitWidth(选择器1、选择器2){
console.log('fitWidth is executed');
让tableHeadElements=document.getElementsByClassName(选择器1);
让tableBodyElements=document.getElementsByCassName(选择器2);
for(设i=0;ibodyCell.clientWidth?bodyCell.style.width=headCell.clientWidth+“px”:headCell.style.width=bodyCell.clientWidth+“px”;
}
}
}
};

AppName
队列名
服务器
服务
接收计数
处理计数
队列计数
极限
基础知识
ABCDEFGHI
abcd01
9999
400
999
20000
2000
基础知识
ABCDEFGHI
abcd01
9999
400
999
20000
2000

AppName 队列名 服务器 服务 接收计数 处理计数 队列计数 极限 A22 ABCDEFGHI abcd01 9999 400 999 20000 2000 A22 ABCDEFGHI abcd01 9999 400 999 20000 2000
配合宽度
您应该使用返回非四舍五入数字的

并返回一个四舍五入整数。这些页面说明:

注意:此属性将值舍入为整数。如果需要小数,请使用element.getBoundingClientRect()


有几种解决方案

让我们先从这个问题开始

您使用的是
clientWidth
,根据文档所示

clientWidth属性以像素为单位返回元素的可视宽度,包括填充,但不包括边框、滚动条或边距。

因此,当您将一个元素的clientWidth指定给另一个元素的宽度时,它也会添加填充,这是我们想要的,但如果有边界,则忽略边界,这就是正在发生的情况

现在,如果我们删除填充,如果两个单元格的边框宽度相同,即使我们添加
框大小:border-box由于clientWidth不考虑边界,因此不会有任何差异


转到
offsetWidth

offsetWidth属性以像素为单位返回元素的可视宽度,包括填充、边框和滚动条,但不返回边距。

现在这个看起来很完美,因为它还包括边框和滚动条,所以添加了
box size:border-box将起作用

函数fitWidth(选择器1、选择器2){
console.log('fitWidth is executed');
让tableHeadElements=document.getElementsByClassName(选择器1);
让tableBodyElements=document.getElementsByCassName(选择器2);
for(设i=0;ibodyCell.offsetWidth?bodyCell.style.width=headCell.offsetWidth+“px”:headCell.style.width=bodyCell.offsetWidth+“px”;
}
}
}
};
*{
框大小:边框框;
}
运输署{
最大宽度:100px;
空白:nowrap;
溢出-x:滚动;
}

AppName
队列名
服务器
服务
接收计数
处理计数
队列计数
极限
基础知识
ABCDEFGHI
abcd01
9999
400
999
20000
2000
基础知识
ABCDEFGHI
abcd01
9999
400
999
20000
2000

AppName 队列名 服务器 服务 接收计数 处理计数