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

Question

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?

possible duplicate of [CSS: How to set the table column width constant regardless of the amount of text in its cells?](http://stackoverflow.com/questions/4457506/css-how-to-set-the-table-column-width-constant-regardless-of-the-amount-of-text) — Ciro Santilli OurBigBook.com, Apr 14 '15 at 19:39

score 7 · Answer 1 · edited Jun 20 '20 at 09:12

7

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)

edited Jun 20 '20 at 09:12

Community

1
1

answered Oct 05 '10 at 17:27

barrylloyd

1,599
1
11
18

The only thing I would add to this is that the text might still overflow the `td` (e.g., if you have a super-long string) and that if *that* happens then you want to consider wrapping the `td` contents in a `div` with `overflow:auto` set. – founddrama Jan 31 '13 at 16:53
the link is broken – Fortune Jun 10 '18 at 18:38

score 4 · Accepted Answer · answered Oct 05 '10 at 17:39

4

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.

answered Oct 05 '10 at 17:39

David Thomas

249,100
51
377
410

Thanks a lot! The combination of overflow: hidden and max-width: 1em did the trick! – Noam Oct 05 '10 at 18:14

score 1 · Answer 3 · answered Oct 05 '10 at 17:21

1

How about CSS to address it:

td { overflow: hidden; }

Should probably be enough.

answered Oct 05 '10 at 17:21

g.d.d.c

46,865
9
101
111

I don't believe that a `td` respects the `overflow` property. – founddrama Jan 31 '13 at 16:28

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

3 Answers3