我有一个跨越大部分页面的表。宽度是calc(100% - 20px)
。
当我拖动窗口非常大时,表格会调整以使其占据整个窗口。
当我缩小窗口时,它会再次调整,使其占据整个窗口但在某一点停止调整并溢出窗口边缘。
我想知道如何计算JS或jQuery中表的“最小允许宽度”,而不是实际改变窗口的大小,然后做一个$('table').width()
或类似的东西。值得注意的是,这个“最小允许宽度”是可变的,具体取决于表的内容。我搜索了一下,但没有找到任何好的答案。
/*table style*/
table#myTableId{
display: table;
margin: 10px;
width: -webkit-calc(100% - 20px);
width: -moz-calc(100% - 20px);
width: calc(100% - 20px);
}
您可以临时在桌面上设置一个非常小的宽度,并使用getBoundingClientRect
检查当时的实时宽度。
const table = document.getElementById('myTableId');
// get the original width in case it was set
const originalWidth = table.style.width;
// set the table's width to 1px (0 does not work)
table.style.width = '1px';
// get the current width
const smallestWidth = table.getBoundingClientRect().width;
// set the original width back
table.style.width = originalWidth;
console.log(smallestWidth);
table#myTableId {
display: table;
margin: 10px;
width: -webkit-calc(100% - 20px);
width: -moz-calc(100% - 20px);
width: calc(100% - 20px);
}
<table id="myTableId">
<tr>
<td>Table Cell Content</td>
</tr>
</table>