如何更改转置表使其水平滚动？

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属性。