How to set the width of my table columns to a fixed value?

Question

I'm facing a rather difficult issue at the moment; really appreciate your help.

I have a table with 2 columns, td1 and td2, and containing texts and both of which have fixed widths.

td1.width = 10px and td2.width = 20px

the fixed width are set at runtime one by one from the left using JQuery (as this table is nested inside another table...)

The text width may be longer than these fixed widths in which scenarios the expected behaviour is that

the fixed width of the columns should stay the same 1) if there are extra texts, the text should wrap, it should not increase or decrease the td width 2) if there are empty spaces, the cell width should not be reduced when resizing other columns or page; it should stay intact.

I have set the td.whitespace property to pre-wrap and td.word-wrap: break-word but they haven't helped.

how would these be possible using css 2.0 (not 3.0)?

Thanks,

score 1 · Answer 1 · edited May 23 '17 at 11:55

1

In this case, because the widths are so small, and the text doesn't typically have words that small, it has no way to wrap them, so it extends the width of the td even with a set width!

It decreases the width of the second td because the first is using an extra width.

Also, you could have a situation where the text is so wide (a long word for example) and in that case there is no way to wrap it. Unless using javascript, IMO it is the only way.

I recommend reading this answers: HTML TD wrap text

edited May 23 '17 at 11:55

Community

1
1

answered Aug 11 '11 at 11:21

jackJoe

11,078
8
49
64

I set table-layout:fixed, white-space: pre-wrap and it's fixed now in IE 9.0. However, in IE 6.0, it looks awful and the column widths are messed up. Any solution for IE 6.0 compatibility? – The Light Aug 11 '11 at 13:42
@William it is a miracle that it works in IE9, in IE6 the CSS support is even more limited and I doubt there is any (css) way to do it. – jackJoe Aug 11 '11 at 13:46
yeah, I'd need a miracle to make this work or knowledge how to do so! – The Light Aug 11 '11 at 17:00

score 0 · Accepted Answer · answered Aug 18 '11 at 19:01

ok, I got it resolved. My table had thead and colgroups. Althought their display attribute was hidden, IE 9.0 ignores it whereas IE 6.0 takes them into account in calculating the width of columns!

I removed them using jquery and sorted out!

$('.myTable thead, .myTable colgroup').remove();

How to set the width of my table columns to a fixed value?

2 Answers2