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

Question

我正在努力创建一个数据表，它允许整个表的水平滚动，同时还允许仅 <tbody> 的垂直滚动.我需要 <td> 中的数据要换行的标签，但我不想在 <th> 中的文本上换行元素。

我的问题是我似乎无法让水平滚动条实际工作 - 我的 <th>标签似乎响应迅速并随着屏幕的宽度缩小，所以我在 <th> 上的“white-space: nowrap”元素导致数据溢出到它旁边的列中。

我已经尝试了很多不同的尝试来使它正常工作，但都没有成功。我附上了一个 jsfiddle，其中包含我目前正在尝试的示例:

https://jsfiddle.net/vd0wkf47/

水平缩小浏览器时，我想要 <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/