0

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?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
qazwsx
  • 25,536
  • 30
  • 72
  • 106

2 Answers2

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>?.

Community
  • 1
  • 1
coyotebush
  • 643
  • 6
  • 10
  • Your second solution creates unnecessarily wide cell for a cell content that occupies small width such as the 'A', 'B', '1', and '2', violating requirement 2). As I am adapting your 1st solution to my more realistic application, it seems something is wrong [when I add more columns](http://jsfiddle.net/v2Rvx/2/)? – qazwsx Aug 15 '12 at 21:27
  • As I noted, both solutions have noticeable downsides AFAICT. The first one depended on styling the width of the `col` elements; with more columns, maybe you could split the width among them: http://jsfiddle.net/v2Rvx/3/ – coyotebush Aug 15 '12 at 22:08
  • Can you specify the width percentage/fraction inline in HTML for the columns in ``? – qazwsx Aug 15 '12 at 22:26
  • 1
    If you wanted, you could certainly do `` or ``. – coyotebush Aug 16 '12 at 16:17
0

These tips may help:

1- Do not specify any width for your cells 2- When you insert a page automatically there is a Style created and assigned to it which says: width: 100%;

go ahead and delete it. that way your table will become very small and adapt itself to the content of the cell.

3- Use nowrap property of the cells for the fields that you want to stay in one line like numbers, but do not set it for larger texts and allow it to be multi-line.

4- You may want to set a width for your table or put the table in a panel and set a width for the panel.

I am not sure how to show the scroll bar for just one row, but I think if you show them in multi lines you don't need that option.

Amir Tofighi
  • 287
  • 2
  • 4