Question

A web site of mine has tables nested within absolutely-positioned draggable dialogs that show/hide based on some user interactions. It’s worth mentioning that these tables have table-layout: auto; and width: auto;. A problem arose where a table had so many rows that it went off the bottom edge of the screen. This caused issues with the dragging since we have limited the dragging to the edges of the viewport. To fix the issue, I wrapped the table in a <div> and set max-height: 400px; overflow: auto; on it. This gives the user a nice vertical scroll bar whenever the table exceeds the max-height. That works, but for some reason the browser (both IE and Chrome) is not taking the width of the scroll bar into consideration, so anytime the height of the table exceeds the max and triggers an overflow, the table gets scrunched over to the left and some cells in the first column have a very ugly word-wrap applied to them. Without the overflow/max-height combination, the table width is calculated correctly and there is no overflow.

Live Demo on jsFiddle

I found two ways around this, both of which are not feasible…

1. Explicitly set the width on each of the cells (or use table-layout: fixed)
2. Use overflow-y: scroll; instead of auto which causes the scroll bar to always appear, even when it is not needed. What makes this worse is that overflow-y is a CSS3 property.

There must be a better solution! How can I get a vertical scrollbar on the parent of my table without any word-wrapping?

Answer 1

Figured it out, thanks in part to kei’s answer. Using white-space: nowrap; does indeed prevent the text from wrapping, but it causes a horizontal scrollbar to appear (demo). To remove the horizontal scrollbar, I just applied 18px of right padding to the table parent and now everything works perfect (demo). Thanks to all who helped!

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

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