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％正确。如果表是其父项中的最后一项，它将起作用;否则它将表重新排序为最后一个。 This question讲述了故事的其余部分。

将整个故事放在一起：

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);

在运行时使用DIV包装表

2 个答案: