Fixed-size HTML table cells, even when content is too big?

Question

Hello,

I want to create a diagram using HTML. I used a table with fixed with columns. Everything looks well, but if the content of the a cell is too long, the column width is expanded. I would like the column width to remain fixed, even if some of the content is hidden.

Is there a way to do so?

Thanks, Noam

Answer 1

How about CSS to address it:

td { overflow: hidden; }

Should probably be enough.

Answer 2

Try...

table {table-layout: fixed}

in your stylesheet.

This forces the browser to use the fixed table layout algorithm...

Fixed table layout algorithm:

• The horizontal layout only depends on the table's width and the width of the columns, not the contents of the cells
• Allows a browser to lay out the table faster than the automatic table layout
• The browser can begin to display the table once the first row has been received

(See http://www.w3schools.com/Css/pr_tab_table-layout.asp)

Answer 3

In addition to @barrylloyd's answer, I'd suggest also using:

td,th {
  min-width: 3em; /* the normal 'fixed' width */
  width: 3em; /* the normal 'fixed' width */
  max-width: 3em; /* the normal 'fixed' width, to stop the cells expanding */
}

The min-width might be unnecessary, but it covers all the bases.