Question

我想要一个表的第一列保持固定，并使休息列在x方向上滚动。我有以下markUp：

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

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

Answer 1

可悲的是，TBODY中的溢出不适用于IE8（这是WinXP中最新的，仍然很常见）

我被要求做这个跨浏览器（表格有100％的宽度，复杂的东西很多），我结束了很多javascript 尝试来对齐每一列两个表（一个用于标题，一个用于内容）。

我写了尝试，因为根据细胞内容，它可能会失败或悲惨......

很抱歉，没有现成的代码，但以下是与该项目中的九列对齐的代码。

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

滚动表的一部分

1 个答案: