ThirstyMonkey ThirstyMonkey - 10 days ago 8
CSS Question

Fixed and variable size columns in variable size table

I've looked all over for answers on how to do this, including dozens of answers on Stack Overflow that provide almost but not quite solutions.

I am trying to make a table/list with a number of options. Imagine a table with the following columns:

Delete: A simple icon. This must be a fixed width (because it uses an image)

Name: The name of the item in the list. This should fill the remaining available space, but if the text overflows, I want the ellipsis to appear.

Options A/B/C: You can imagine these are check boxes and also are a fixed with.

So on a wide table it'd look like this:

| X | Item 1 in the list | A | B | C |
| X | Item 2 | A | B | C |
| X | Item 3 has a pretty long name | A | B | C |
| X | Item 4's name is long, realll... | A | B | C |


And on a short table (or say, after the window resized):

| X | Item 1 in the list | A | B | C |
| X | Item 2 | A | B | C |
| X | Item 3 has a pretty... | A | B | C |
| X | Item 4's name is... | A | B | C |


If someone could provide a fiddle showing this in action, that'd be absolutely fantastic.

EDIT: Thank you so much Plymouth!

Answer

I've created a fiddle here.

These are the important styles:

table
{
    table-layout:fixed;
}

.col2
{
    width:auto;
    text-overflow:ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

Is this what you're after?