滚动表格的一部分[重复]

Posted 2023-03-05

【中文标题】滚动表格的一部分[重复]

【英文标题】：scrolling a part of a table [duplicate]

【发布时间】：2011-06-02 20:21:27

【问题描述】：

我希望表格的第一列保持固定，其余列沿 x 方向滚动。我有以下标记：

<div id="outerDiv">
    <div id="innerDIv">
        <table>
           <tr><td>1</td><td>India</td><td>New Delhi</td></tr>
           <tr><td>2</td><td>USA</td><td>NewYork</td></tr>
           <tr><td>3</td><td>France</td><td>Paris</td></tr>
           <tr><td>4</td><td>Japan</td><td>Tokoyo</td></tr>
           <tr><td>5</td><td>China</td><td>Beijing</td></tr>
           <tr><td>6</td><td>UK</td><td>London</td></tr>
        </table>
    </div>
</div>

我试过了：

 #outerDiv

width:130px;
overflow-x:scroll;
 overflow-y:hidden;
 margin-left:30px;
 position:relative;



#innerDIv

margin-left:-30px;

但它不起作用。 我该怎么做。请帮忙。

【参考方案1】：

遗憾的是，TBODY 中的溢出不适用于 IE8（这是 WinXP 中最新的版本，仍然很常见）

我被要求做这个跨浏览器（表格有 100% 的宽度，这让事情变得相当复杂），最后我用了很多 javascript尝试来对齐每一列两张表（一张用于表头，一张用于内容）。

我写了 trying 因为根据单元格的内容，它可能会失败或悲惨...

抱歉，没有可运行的代码，但以下是对齐该项目中九列的代码。

var tab1 = $('#table_top');
var tab2 = $('#table_bottom');

$(tab1).width( $(tab2).width()+'px' );
var offset = tab2.offset()
$(tab1).css('left':offset.left+'px');

var rows = $('#table_bottom tr:eq(0)');
var c0 = $( rows ).find("td:eq(0)").width();
var c1 = $( rows ).find("td:eq(1)").width();
var c2 = $( rows ).find("td:eq(2)").width();
var c3 = $( rows ).find("td:eq(3)").width();
var c4 = $( rows ).find("td:eq(4)").width();
var c5 = $( rows ).find("td:eq(5)").width();
var c6 = $( rows ).find("td:eq(6)").width();
var c7 = $( rows ).find("td:eq(7)").width();
var c8 = $( rows ).find("td:eq(8)").width();

rows = $('#table_top tr:eq(1)');
$( rows ).find("th:eq(0) div:eq(0)").width( c0+"px" );
$( rows ).find("th:eq(1) div:eq(0)").width( c1+"px" );
$( rows ).find("th:eq(2) div:eq(0)").width( c2+"px" );
$( rows ).find("th:eq(3) div:eq(0)").width( c3+"px" );
$( rows ).find("th:eq(4) div:eq(0)").width( c4+"px" );
$( rows ).find("th:eq(5) div:eq(0)").width( c5+"px" );
$( rows ).find("th:eq(6) div:eq(0)").width( c6+"px" );
$( rows ).find("th:eq(7) div:eq(0)").width( c7+"px" );
$( rows ).find("th:eq(8) div:eq(0)").width( c8+"px" );