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

Question

我正在做一个 table 用于产品比较。它是一个带有垂直行的 table，左侧有一个 header，table body 中垂直行有两个或更多产品描述。如果用户选择了很多产品，它应该可以水平滚动。

我使用了 this answer to transpose a table (i.e. make vertical rows). And now I can't manage to add a horizontal scrollbar inside tbody in case if table exceeds the predefined width. I am looking for something similar to this question 中的 CSS，但应用于我的转置 table。

这是我现在拥有的：JSFiddle 这是当我将 table 宽度限制为 200px 时发生的情况：

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>

table 不应显示为块，如果您的其他布局不需要
我添加了 white-space: nowrap 以防止换行
我已将 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 宽度和 overflow-x 属性。

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

How to change a transposed table to make it horizontally scrollable?

html

css

html-table

horizontal-scrolling