Question

我正在创建一个数据表，该数据表允许整个表的水平滚动，同时也仅允许<tbody>的垂直滚动。我需要包装<td>标签中的数据，但是我不想包装<th>元素中的文本。

我的问题是我似乎无法使水平滚动条真正起作用-我的<th>标签似乎具有响应性，并且会随着屏幕的宽度而缩小，所以我的“空白：nowrap <th>元素上的“”会导致数据溢出到旁边的列中。

我尝试了多种尝试来使此工作顺利进行。我附上一个jsfiddle并附带我目前正在尝试的示例：

当水平缩小浏览器时，我希望<th>元素在达到文本宽度后停止缩小。那是水平滚动条应插入整个表格的时间。

Answer 1

在th元素上设置宽度，并将overflow设置为auto：

th {
  white-space: nowrap;
  width: calc(50% - .5em);           /* half of your thead width */
  display: inline-block;
  overflow: auto;
  -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
}

table {
  border-collapse: collapse;
  width: 100%;
}

table, th, td {
  border: 1px solid black;
}


thead, tr {
  display:table; 
  width:100%; 
  table-layout:fixed;
}

thead {
  width: calc( 100% - 1em );
}

th {
  white-space: nowrap;
  width: calc(50% - .5em);
  display: inline-block;
  overflow: auto;
}

tbody {
  max-height:100px; 
  display:block; 
  overflow-y: scroll;
  overflow-x: hidden; 
}

td {
  overflow-wrap:
}

.table-wrapper {
  overflow-x: scroll; 
  overflow-y: hidden;
}

    <div class="table-wrapper">
      <table>
        <thead>
          <th>A Long Long Long Header A Long Long Long Header</th>
          <th>Second Header</th>
        </thead>

        <tbody>
         <tr>
            <td>Data 1</td>
            <td>Data 2</td>
         </tr>
         <tr>
            <td>Long Long Longggggggggg Data</td>
            <td>Data 2</td>
         </tr>
         <tr>
            <td>Data 1</td>
            <td>Data 2</td>
         </tr>
                  <tr>
            <td>Data 1</td>
            <td>Data 2</td>
         </tr>
         <tr>
            <td>Long Long Longggggggggg Data</td>
            <td>Data 2</td>
         </tr>
         <tr>
            <td>Data 1</td>
            <td>Data 2</td>
         </tr>
        </tbody>
      </table>
    </div>

https://jsfiddle.net/u5fpc160/1/

如何使用nowrap在元素上水平滚动表而不会溢出到下一列？

1 个答案: