在运行时使用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);