Html 如何在nowrap打开时水平滚动表格<；th>；元素没有溢出到下一列？

我正在创建一个数据表，它允许水平滚动整个表，同时也只允许垂直滚动

。我需要包装

标记中的数据，但我不希望包装

元素中的文本

我的问题是，我似乎无法让水平滚动条真正工作-我的

标记似乎是响应性的，并且随着屏幕的宽度而收缩，因此

元素上的“空白：nowrap”导致数据溢出到它旁边的列中

我已经尝试了许多不同的尝试来让这个工作没有运气。我附上了一个JSFIDLE，其中有一个我目前正在尝试的示例：

---

水平收缩浏览器时，我希望

元素达到文本宽度后停止收缩。此时，水平滚动条应在整个表格中启动。

在

th

元素上设置一个宽度，并将

溢出设置为
自动
：

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 */
}


表格{
边界塌陷：塌陷；
宽度：100%；
}
表，th，td{
边框：1px纯黑；
}
西阿德，tr{
显示：表格；
宽度：100%；
表布局：固定；
}
泰德{
宽度：钙（100%-1米）；
}
th{
空白：nowrap；
宽度：钙（50%-.5em）；
显示：内联块；
溢出：自动；
}
t车身{
最大高度：100px；
显示：块；
溢出y：滚动；
溢出x：隐藏；
}
运输署{
溢出包装：
}
.表格包装{
溢出-x：滚动；
溢出y：隐藏；
}

长长的收割台长长的收割台
第二个标题
数据1
数据2
Long longgggggg数据
数据2
数据1
数据2
数据1
数据2
Long longgggggg数据
数据2
数据1
数据2
请使用的代码段功能（而不是场外）将示例代码添加到问题中。