js table根据窗口大小重绘
时间: 2023-08-05 11:10:27 浏览: 46
要根据窗口大小自动调整表格的大小,你可以使用 JavaScript 和 CSS 来完成。
首先,你需要在 CSS 中定义表格的样式。设置表格的宽度为100%以使其占据整个窗口:
```css
table {
width: 100%;
}
```
然后,在 JavaScript 中,你需要编写一个函数来检测窗口大小变化,并根据窗口大小重新计算表格的大小。可以使用 window.onresize 事件来检测窗口大小变化,并调用重新计算表格大小的函数:
```js
window.onresize = function() {
resizeTable();
}
```
最后,在 resizeTable() 函数中,你需要获取表格元素并重新计算其宽度。可以使用 offsetWidth 属性来获取表格元素的宽度,并将其设置为新的宽度:
```js
function resizeTable() {
var table = document.getElementsByTagName('table')[0];
var windowWidth = window.innerWidth;
var tableWidth = table.offsetWidth;
if (tableWidth > windowWidth) {
table.style.width = '100%';
} else {
table.style.width = '';
}
}
```
这个函数会检查表格元素的宽度是否大于窗口的宽度。如果是,则将表格的宽度设置为100%,否则将其重置为默认宽度。你可以根据需要调整这个函数来适应你的表格大小和样式。