在<table>父元素上使用“ overflow：auto”会导致第一列中令人讨厌的自动换行

问题描述

| 我的一个网站在绝对定位的可拖动对话框中嵌套了表格，这些对话框基于某些用户交互来显示/隐藏。值得一提的是，这些表有

table-layout: auto;

和

width: auto;

。出现了一个问题，即一个表有太多行以至于超出了屏幕的底部边缘。由于我们将拖动限制在视口的边缘，因此这导致了拖动问题。为了解决这个问题，我将桌子包裹在ѭ2中，并在上面放了ѭ3。每当表格超过最大高度时，这都会为用户提供一个不错的垂直滚动条。那行得通，但是由于某种原因，浏览器（IE和Chrome）都没有考虑滚动条的宽度，因此，只要表格的高度超过最大值并触发溢出，表格就会向左收缩第一栏中的某些单元格使用了非常难看的自动换行如果没有溢出/最大高度组合，则表的宽度将正确计算，并且不会发生溢出。 jsfiddle上的实时演示 我发现了两种解决方法，但都不可行... 明确设置每个单元格的宽度（或使用

table-layout: fixed

） 使用ѭ5代替自动，这会导致滚动条始终显示，即使不需要滚动条也是如此。更糟糕的是，overflow-y是CSS3属性。 必须有更好的解决方案！如何在没有任何自动换行的情况下在表的父级上获得垂直滚动条？     

解决方法

        您可以尝试将table6应用于表，但是如果您不希望显示水平滚动条，则可能需要显式调整ѭ7的宽度。     ,        弄清楚了，部分原因是kei的回答。使用ѭ6确实可以防止文本换行，但是会导致出现水平滚动条（演示）。要删除水平滚动条，我只对表父级应用了18px的右填充，现在一切正常（演示）。感谢所有的帮助！

div.dialogBody {
  overflow: auto;
  padding-right: 18px;
  max-height: 400px;
}

div.dialogBody table td,div.dialogBody table th {
  white-space: nowrap;
}