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

Question

我正在制作一个产品比较表。它是一个带有垂直行的表格，左侧有一个标题，表格主体内的垂直行中有两个或多个产品描述。如果用户选择了很多产品，它应该可以水平滚动。

我使用this answer 中的 CSS 来转置表格（即制作垂直行）。现在我无法在tbody 中添加水平滚动条，以防表格超出预定义的宽度。我正在寻找类似于 this question 但应用于我的转置表的东西。

这是我现在所拥有的：JSFiddle，当我将表格宽度限制为 200 像素时会发生以下情况：

Answer 1

试试inline-blocks 和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>

您可以考虑块布局。事实上你已经实现了它，除了 HTML 什么是不好的模式。

Answer 2

这不是有效的 HTML，但您可以用 div 包裹 tbody，然后为 div 赋予 width 和 overflow-x 属性。