How do I prevent my html table from stretching

Question

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?

Answer 1

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

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

Answer 2

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).

Answer 3

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.

Answer 4

If you must absolutely have the table maintain it's layout even in the face of non-breaking spaces, then you'll need to use:

 overflow: hidden;

However, I'd recommend against it. IMO, it's more important to have the data readable than the layout perfect.

Answer 5

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.