<table>並排，但第二個可以滾動

Question

我有類似的東西

<div container style="width: 100%">
    <table id="t1" style="width: 40%">
            ...
    </table>
        <table id="t2" style="width: 60%">
            ...
    </table>
</div>

兩個表都display: inline-block但要注意的是， t2太長了一個表（幾個td s），我希望t2可滾動。

編輯 ：我很抱歉，但“可滾動” =水平:)（我認為提示是“幾個tds”）

Answer 1

使用CSS進行t2

overflow-x:scroll;
overflow-y:hidden;

Answer 2

代碼需要清理，但這是您要達到的效果嗎？

<div container style="width: 100%">
    <div style="width: 40%; float:left;">    
        <table id="t1">
        ...
        </table>
    </div>    
    <div style="width: 60%; overflow-x:auto;">
        <table id="t2">
        ...
        </table>
    </div>
</div>

小提琴： http : //jsfiddle.net/YudJn/3/

Answer 3

您可以將#t1設置為position:fixed並依靠正文滾動來滾動更長的表。 請記住，這樣做時，您需要調整#t2上的邊距以適應重疊。 或者，您需要將#t2放置在帶有overflow:scroll的固定高度div中。