我正在制作一个产品比较表。它是一个具有垂直行的表格，左侧有一个标题，表格主体内的垂直行中有两个或多个产品描述。如果用户选择很多产品，它应该是水平滚动的。
我使用过CSS这个答案 https://stackoverflow.com/a/16919439/1429387转置表格（即制作垂直行）。现在我无法在其中添加水平滚动条tbody如果表格超出预定义的宽度。我正在寻找类似的东西这个问题 https://stackoverflow.com/q/17067294/1429387但适用于我的转置表。
这是我现在所拥有的：JSFiddle http://jsfiddle.net/naXa/cy21bLLp/1/当我将表格宽度限制为 200px 时，会发生以下情况：
尝试以下组合inline-blocks and 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>
-
table如果您的其他布局不需要，则不应显示为块
- 我已经添加
white-space: nowrap防止换行
- 我已经显示了
tbody and thead as 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>
您可以考虑块布局。事实上你已经实现了它，除了 HTML，这是一个糟糕的模式。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
