CODEWITHSUNDEEP
cssformattingwidthscrollbarcss-tables
qazwsx
qazwsx

Reputation: 26938

How to format a table using CSS such that the table is within the screen and cells use as much possible and necessary width?

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?

Upvotes: 0

Views: 242

Answers (2)

coyotebush
coyotebush

Reputation: 653

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

Upvotes: 1

Amir Tofighi
Amir Tofighi

Reputation: 307

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.

Upvotes: 0

Related Questions