Question

How to format a table using CSS such that:

1. the table is within the screen that the browser’s horizontal scroll bar doesn’t show up and users don’t need to scroll horizontally to see the right side of the table;

2. the cells use as much width as necessary, that a column containing cells that only has numbers such as “1”, “21” will not use a width that’s much wider than necessary to show all the numbers in all cells in that column, say 4 character width, i.e. using much more than it means wasting horizontal space;

3. for columns containing very wide cells, or more precisely, content that will occupy large width if allowed, use as much width as possible such that 1) and 2) are not violated, and if the whole content of the cell can’t be displayed, let horizontal scroll bar show up for that cell.

Is this doable in CSS for latest Firefox and Google chrome on Windows and Mac OS X?

Answer 1

My first attempt was based on CSS: Constrain a table with long cell contents to page width?, using nested divs with position: relative then position: absolute. The size of the absolutely positioned div isn’t taken into account, which is good for the table’s width but bad for the row’s height: it doesn’t expand to include the scrollbar.

Then I tried table-layout: fixed as suggested in How can I set a <td> width to visually truncate its displayed contents?. That also accomplishes the goal of ignoring the size of the cell’s content, but in doing so makes it so that we can’t specify, as before, that the last column should take all leftover width.

See also: Why does overflow:hidden not work in a <td>?.