Table Cell Data (overflow: hidden) Problem

HTML & CSS
1

I have a table with a lot of columns. I’m trying to make it more appealing to users with smaller resolutions although there is only so much that can be done.

Here is the original table without overflow and a wider resolution:

Same table with a smaller resolution:

I want to have the overflow of text to be hidden instead of wrapping down. To accomplish this I used this CSS:


table { width: 100%; table-layout: fixed }
td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }

Here is what the table looks like now:

Everything is good except for one problem, I still want the table cells to be dynamic based on how much content is in the cell. For example, if you look at the picture above, the “Day” column should be smaller which would then allow for the Product Name column to show more data and possibly not even overflow.

Any way to achieve this?

2

There are two modes to a table… in an over simplified explanation, one mode favours expanding all cells to divide the space evenly ( fixed) the other favours expanding to fit the wides content in each col (auto) ,

so when you use table-layout:fixed; you are setting the columns width to be generally equal by default. As Stevie suggested you could set WIDTHS or maybe even MAX_WIDTHS on specific TDs. keep in mind that these would still apply in LARGE MONITORS so if you set the DAY TDs to a width of 3em… they will be 3em even in large resolution screens where there is space to spare.

3

I’m not an expert on tables, but you might find that you need to set a % width on each of the columns (you only need to do this on the <th> in the first row, not in the <td>s all the way down). You’ll need to approximate how much space, proportionally, you want each column to take up.

4

I never thought to use fixed widths with ems instead of percent. I’ll give that a try, thank you.