如何更改转置表以使其可水平滚动？ [英] How to change a transposed table to make it horizontally scrollable?

问题描述

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

我使用了来自

解决方案

尝试组合内联块和 nowrap ：

  table {border-collapse：collapse;白色空间：nowrap; } tr {display：block;向左飘浮; } th，td {display：block;边框：1px纯黑色; } tbody，thead {display：inline-block; } tbody {width：300px;溢出y：隐藏; overflow-x：auto;}  

 < table>< ; THEAD> < TR> <的第i;名称< /第> <的第i;数< /第> < / 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 as inline-block 所以现在你可以像内联元素一样管理它们。

如果您想仅在没有 thead的情况下滚动 tbody ，它可能如下所示：

  table {border-collapse：collapse;白色空间：nowrap; } tr {display：inline-block; } th，td {display：block;边框：1px纯黑色; } tbody，thead {display：inline-block; vertical-align：top; } tbody {width：150px;溢出y：隐藏; overflow-x：auto; white-space：nowrap;} tbody tr {margin-right：-5px;}  

 <表>< THEAD> < TR> <的第i;名称< /第> <的第i;数< /第> < / 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，这是一个糟糕的模式。

I am making a table for products comparison. It's a table with vertical rows, a header at the left side and two or more product descriptions in vertical rows inside table body. It should be horizontally scrollable in case if user chooses a lot of products.

I have used CSS from 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 but applied to my transposed table.

Here's what I have now: JSFiddle and here's what happens when I limit the table width to 200px:

解决方案

Try the combination of 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>

1. table shouldn't be displayed as block, if it not necessary for your other layout
2. I've added white-space: nowrap to prevent line wrapping
3. I've displayed tbody and thead as inline-block so now you can manage them like inline elements.

If you would like to scroll the tbody only without thead, it might looks like this:

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>

You can think about blocks layout instead. In fact you've already implemented itexcept the HTML what is a bad pattern.

这篇关于如何更改转置表以使其可水平滚动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！