javascript - 在运行时用 DIV 包装表

Question

我在这里的第一个问题。

给定一张桌子：

<table id="mytable">
 <tr><td>row1 col1</td><td>row1 col2</td></tr>
 <tr><td>row2 col1</td><td>row2 col2</td></tr>
</table>

我知道如果我用 包裹上面的<div style="overflow-x:scroll;">内容，我将在表格下方有一个水平滚动条。不幸的是，我无法更改 table/html 的编写方式。我只能通过 javascript 操作内容。

我试过：

document.getElementByID("mytable").style.overflowX = scroll;

但它没有用。

知道是否可以做到吗？如何？

提前致谢。

Answer 1

您可以使用

$("#yorutable").wrap($("<div />").css("overflow-x":"scroll"));

用 div 运行时间扭曲你的桌子。

如果你不能添加 jquery，你可以做类似的事情

var tbl = document.getElementById('yourtable'); 
var parent = tbl.parentNode;
var wrapper = document.createElement('div');
wrapper.style.overflowX="scroll"; 
wrapper.appendChild(tbl);
parent.appendChild(wrapper);

Answer 2

Pratik 的解决方案具有教育意义，但并非 100% 正确。如果表是其父项中的最后一项，它将起作用；否则它会将表格重新排序为最后一个。这个问题讲述了故事的其余部分。

把整个故事放在一起：

var tbl = document.getElementById('yourtable'); 
var parent = tbl.parentNode;
var wrapper = document.createElement('div');
wrapper.style.overflowX="scroll"; 
parent.insertBefore( wrapper, tbl );
wrapper.appendChild(tbl);