Fixed and variable size columns in variable size table

Question

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!

Plymouth223 · Accepted Answer · 2013-09-12 02:53:47Z

1

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?

answered Sep 12, 2013 at 2:53

Plymouth223

1,9351 gold badge12 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Fixed and variable size columns in variable size table

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related