如何更改轉置表使其水平滾動？

Question

我在製作產品比較表。它是一個垂直行的表格，左側的標題和表格內部的垂直行中的兩個或更多產品說明。如果用戶選擇了很多產品，它應該是水平滾動的。

我已經使用來自this answer的CSS轉置一個表（即創建垂直行）。現在我無法在tbody的內部添加水平滾動條，以防表格超出預定義的寬度。我正在尋找類似於this question的東西，但適用於我的轉置表。

這是我現在有：JSFiddle這裏就是發生在我限制了表格寬度200像素：

Answer 1

嘗試的inline-block S和nowrap組合：

table { border-collapse: collapse; white-space: nowrap; } 
 
tr { display: block; float: left; } 
 
th, td { display: block; border: 1px solid black; } 
 
tbody, thead { display: inline-block; } 
 

 
tbody { 
 
    width: 300px; 
 
    overflow-y: hidden; 
 
    overflow-x: auto; 
 
}

<table> 
 
<thead> 
 
    <tr> 
 
     <th>name</th> 
 
     <th>number</th> 
 
    </tr> 
 
</thead> 
 
<tbody> 
 
    <tr> 
 
     <td>James Bond</td> 
 
     <td>007</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Lucipher</td> 
 
     <td>666</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Jon Snow</td> 
 
     <td>998</td> 
 
    </tr> 
 
</tbody> 
 
</table>

1. table不應該被顯示爲塊，如果沒有必要爲您的其他佈局
2. 我添加white-space: nowrap防止換行
3. 我已經顯示tbody和thead作爲inline-block所以現在你可以管理它們像內聯元素。

如果你想滾動tbody唯一沒有thead，它可能看起來是這樣的：

table { border-collapse: collapse; white-space: nowrap; } 
 
tr { display: inline-block; } 
 
th, td { display: block; border: 1px solid black; } 
 
tbody, thead { display: inline-block; vertical-align: top; } 
 

 
tbody { 
 
    width: 150px; 
 
    overflow-y: hidden; 
 
    overflow-x: auto; 
 
    white-space: nowrap; 
 
} 
 
tbody tr { margin-right: -5px;}

<table> 
 
<thead> 
 
    <tr> 
 
     <th>name</th> 
 
     <th>number</th> 
 
    </tr> 
 
</thead> 
 
<tbody> 
 
    <tr> 
 
     <td>James Bond</td> 
 
     <td>007</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Lucipher</td> 
 
     <td>666</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Jon Snow</td> 
 
     <td>998</td> 
 
    </tr> 
 
</tbody> 
 
</table>

你可以想想塊佈局來代替。事實上，你已經實現了itexcept HTML，這是一種壞模式。

Answer 2

這將不是有效的HTML，但你可以用一個div包裝tbody，然後給div的寬度和overflow-x屬性。