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

Question

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

我已经使用了这个答案的 CSS 来转置一个表(即制作垂直行).现在我无法在内部添加水平滚动条tbody,以防表格超出预定义的宽度.我正在寻找类似于这个问题的东西,但适用于我的转置表.

这就是我现在拥有的:JSFiddle以及当我将表格宽度限制为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>

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,这是一个糟糕的模式.