Grow your CSS skills. Land your dream job.

Table Sizing

  • # August 15, 2010 at 4:19 am

    Hey, I’m working on a web app and I need to display some tabular data. The is generated dynamically so there is no way for me to find out the exact sizes.
    I want each row to be a specific height and have a max-width with an elipsis if the content is too big for the cell.
    Adding max-width doesn’t seem to do anything and setting a specific height works until the content overflows..
    When I add table-layout:fixed; to my table it stops the content overflowing how I would like it but it ignores the cell padding and it sets a fixed width for each column. Is there anyway to have the overflow hidden like I want, each row having the fixed height and have each column base its width on the th for that column?
    Also with the table:layout:fixed; when I add more columns the others just shrink so they are all an even size.

    I don’t know if I explained myself that well so if you don’t understand let me know and I’ll try to explain it better.

    Thanks
    Johnathan

    # August 15, 2010 at 1:41 pm

    In CSS, there is no way to truncate the text as your describing it. ("Item two is…") You’d have to use JavaScript or something else.

    You can use overflow: hidden; for a start, though.

    Also, if using layout: fixed; I can assume that you can add an !important property to the declarations not applying.

    Also, do you have a link to the issue?

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".