我的一个网站有嵌套在绝对定位的可拖动对话框中的表格，这些对话框根据某些用户交互显示/隐藏。值得一提的是，这些表有 table-layout: auto;和 width: auto; .当表格的行太多以至于超出屏幕底部边缘时，就会出现问题。这导致了拖动问题，因为我们将拖动限制在视口(viewport)的边缘。为了解决这个问题，我将表格包裹在 <div> 中。并设置 max-height: 400px; overflow: auto;在上面。每当表格超过最大高度时，这都会为用户提供一个漂亮的垂直滚动条。这行得通，但由于某种原因，浏览器(IE 和 Chrome)没有考虑滚动条的宽度，所以只要表格的高度超过最大值并触发溢出，表格就会向左挤压第一列中的某些单元格应用了非常难看的自动换行。没有溢出/最大高度组合，表格宽度计算正确，没有溢出。
我找到了两种解决方法，这两种方法都不可行......
- 明确设置每个单元格的宽度(或使用
table-layout: fixed) - 使用
overflow-y: scroll;而不是 auto，它会导致滚动条总是出现，即使不需要它也是如此。更糟糕的是，overflow-y 是一个 CSS3 属性。
一定有更好的解决办法!如何在没有任何文字换行的情况下在我的表格的父级上获得垂直滚动条？
最佳答案
您可以尝试将 white-space: nowrap; 应用到您的表格，但如果不这样做，您可能需要显式调整 div.dialog 的宽度不希望出现水平滚动条。
关于html - 在 <table> 父元素上使用 "overflow: auto"会导致第一列中令人讨厌的自动换行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6432256/