如何修復HTML表格中的第一列以允許水平滾動？

我有一個四列三行的表。我想在表格上添加水平滾動，但第一列應該保持不變。如何修復HTML表格中的第一列以允許水平滾動？

我的HTML的結構是這樣的：

<table> 
    <tr> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr> 
    <tr> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr> 
    <tr> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr> 
</table>

我可以用什麼CSS來實現這個效果？

來源

2013-01-03 user1944725

表分成兩個部門，是什麼意思？你需要divs的表結構？ – Sowmya

你能舉一個最終結果應該是什麼樣子的例子嗎？ – Aditi

你只能用div來做。不需要使用表格。從技術上講td在div中是錯誤的。 –

你可以在單獨的div中做兩個表。看看這個DEMO爲例。

CSS

#col-one { 
    float: left; 
    background-color: red; 
} 
#col-two { 
    float: left; 
    background-color: green; 
}

HTML

<div id="col-one"> 
<table width="200px" border="1" cellspacing="0" cellpadding="0"> 
    <tr> 
    <td>abc</td> 
    </tr> 
    <tr> 
    <td>123</td> 
    </tr> 
    <tr> 
    <td>abc</td> 
    </tr> 
</table> 
</div> 
<div id="col-two"> 
<table width="600px" border="1" cellspacing="0" cellpadding="0"> 
    <tr> 
    <td>123</td> 
    <td>abc</td> 
    <td>123</td> 
    </tr> 
    <tr> 
    <td>abc</td> 
    <td>123</td> 
    <td>abc</td> 
    </tr> 
    <tr> 
    <td>123</td> 
    <td>abc</td> 
    <td>123</td> 
    </tr> 
</table> 
</div>

來源

2013-01-03 06:05:16

您添加了另一個表來增加加載時間。 –

-1

使用display:table選項來把它用純CSS和DIV完成。

HTML

<div class="table"> 
    <div class="table_row"> 
     <div >xzv</div> 
     <div>fjgj</div> 
     <div>gj g</div> 
     <div>gdj hk</div> 
    </div> 
    <div class="table_row"> 
     <div >8080</div> 
     <div>7808</div> 
     <div>870g</div> 
     <div>80hk</div> 
    </div> 
</div>

CSS

body{margin:20px} 
    .table{ 
     display:table; 
     border-top:solid 1px red; 
     border-left:solid 1px red; 
     width:100% 
    } 
    .table_row{ 
     display:table-row 
    } 
    .table_row div{ 
     display:table-cell; 
     border-right:solid 1px red; 
     border-bottom:solid 1px red 
    }

DEMO

來源

2013-01-03 06:06:19 Sowmya

瀏覽器兼容性如何？ –

如何修復HTML表格中的第一列以允許水平滾動？

回答

相關問題