How Do I Prevent My Html Table From Stretching

Sometimes when a piece of data in one of my table cells is too long it stretches the cell and deforms the layout of the entire table. how can i prevent this?

Solution 1:

You probably want table-layout:fixed and set width on the first cells of a row.

See http://www.w3.org/TR/CSS2/tables.html#fixed-table-layout for detailed explanation.

Solution 2:

I just had the same problem and ended up solving it with this:

table { width: 1px; /* This ugly hack allows the table to be only as wide as necessary, breaking text on spaces to allow cells to be less wide. */ }

Apparently, setting the table width to something very small forces it to break text up and take less horizontal space. Words will not be broken though, so the table will end up being at least large enough for the largest word of each column.

Tried tested and true on:

Linux (Ubuntu 10.04)

• Firefox 3.6.18
• Chromium-browser 12.0.742.112 (90304) whatever all that means
• Konqueror 4.5.3
• SeaMonkey 2.0.11

Windows:

• Internet Explorer 7
• Firefox 4.0.1

If someone (I can't in my present situation) could test this on latest versions of IE, Firefox, Chrome, Safari and Opera and leave a comment or edit this answer, that would be awesome!

Solution 3:

Assuming you don't have any non-breaking spaces or super-long text without a space in the cell, I've usually had the best luck by explicitly setting the width of said cell via CSS (seems to work better than doing something like "width='100'". If the data in the cell is just a really long string, there's not much you can do other than truncate it programatically, or wrap the data in a div with an explicit width and something like overflow: hidden / auto (auto if you want a horizontal scrollbar or something).

Solution 4:

Set the width and height of the td tag using CSS. Then you need to deal with overflow.

td {
  width: 40px;
  height: 20px;
}

Solution 5:

Use overflow: hidden to hide the overflow as such:

td, th {
    overflow: hidden;
}

For this to work, your <td> or <th> tags needs to be assigned a width.