【问题标题】:How to change a transposed table to make it horizontally scrollable?如何更改转置表以使其水平滚动?
【发布时间】:2017-09-12 13:32:42
【问题描述】:

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

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

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

【问题讨论】:

    标签: html css html-table horizontal-scrolling


    【解决方案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. 我已将tbodythead 显示为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 什么是不好的模式。

    【讨论】:

    • 谢谢!我试过你的解决方案。但是块仍然没有内联排列并且没有水平滚动 - jsfiddle.net/naXa/cy21bLLp/3
    • 我明白了。您已经减小了tbody 的宽度,并且希望只看到tbody 的scoll 条。我已经对答案进行了改进。
    【解决方案2】:

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2023-03-28
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多