如何使用CSS創建可滾動的HTML表列？

Question

我想讓我的HTML表將整個列滾動，使所有單元格彼此對齊。

以下示例的結果應該是表底部的兩個水平滾動條：一個在列＃1的底部，另一個在列＃3的底部，同時滾動相應滾動條上方的所有單元格。

如何僅使用CSS而不使用絕對長度呢？

這是我的-不起作用-示例代碼：

 table { width: 100%; table-layout: fixed; } col.left, col.right { overflow-x: auto; } td { white-space: nowrap; border-bottom: 1px solid silver; } td.left, td.right { min-height: 5em; } td.middle { width: 2em; text-align: center; } 

 <table> <colgroup> <col class="left" /> <col class="middle" /> <col class="right" /> </colgroup> <tbody> <tr> <td class="left">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td> <td class="middle">&lt;&nbsp;&gt;</td> <td class="right">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td> </tr> <tr> <td class="left">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td> <td class="middle">&lt;&nbsp;&gt;</td> <td class="right">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd, no sea takimata<br/>sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore<br/>et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea sanctus est Lorem ipsum dolor sit amet.</td> </tr> <tr> <td class="left">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td> <td class="middle">&lt;&nbsp;&gt;</td> <td class="right">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea sanctus est Lorem ipsum dolor sit amet.</td> </tr> </tbody> </table> 

Answer 1

這是我能想到的最接近的東西-將可滾動的列放在tbody元素中，將固定的列放在thead元素中，並利用了使表主體可獨立於標題進行滾動的功能。 不幸的是，我認為您仍然需要指定可滾動列的寬度才能獲得overflow-x: scroll即可工作。

 table thead, table tbody { display: inline-block; } table tbody { width: 200px; overflow-x: scroll; white-space: nowrap; } 

 <table> <tbody> <tr> <td class="left">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam. At vero eos et accusam et justo dua kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td> </tr> <tr> <td class="left">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam. At vero eos et accusam et justo dua kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td> </tr> </tbody> <thead> <tr> <td class="middle">&lt;&nbsp;&gt;</td> </tr> <tr> <td class="middle">&lt;&nbsp;&gt;</td> </tr> </thead> <tbody valign="top"> <tr> <td class="right">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam. At vero eos et accusam et justo dua kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td> </tr> <tr> <td class="right">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam. At vero eos et accusam et justo dua kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td> </tr> </tbody> </table>