How to set column width of a table in ccs

Dear readers,

Can anyone explain how to set column width of a table in ccs.
I use the following style in an external stylesheet:

table.tbl { table-layout:fixed; border-top: 5px solid #333; border-collapse:
collapse; background: #fff; width: 95%}
table.tbl td { border-bottom: 1px dashed #33ccff; padding: 2px 5px;
text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }

Now I define the table as follows:

<table class="tbl">
<tr>
<td width="150px">Spacer 1</td>
<td width="50px">S4L</td>
<td width="*">This is a long sentence that will hopefully truncate
correctly. </td>
<td width="150px">Spacer 2 </td>
</tr>
</table>

Though this works fine, but I would like to set the column width in the css.
I tried the following in css:

table.tbl td.col1 { width: 150px; color: blue; }

and the following html:

<td class="col1">Spacer 1</td>

This makes my text blue but does not set my width...
Please advice.

Tia, Jean.

white-space:nowrap;

this keeps the text from wraping so if your text is longer then the
width it will overflow. ie. increase the containers width.

white-space:normal; is adviced

"logic_earth" <logicearth (AT) gmail (DOT) com> wrote

white-space:nowrap;

this keeps the text from wraping so if your text is longer then the
width it will overflow. ie. increase the containers width.

white-space:normal; is adviced

Yes, that is intended: I want these rows fixed in height.

The question is how to set the column width...

Jean

"Christoph Päper" <christoph.paeper (AT) nurfuerspam (DOT) de> schreef in bericht
news:dbqqp6$1e1$1 (AT) ariadne (DOT) rz.tu-clausthal.de...

Jean Pion:
text-overflow:ellipsis;

Do you really expect proposed CSS3 properties to work?

Well, it does on IE6 and FF appears to do a {text-overflow:hidden} instead.

table class="tbl"
tr
td width="150px">Spacer 1</td
td width="50px">S4L</td
td width="*">(...) hopefully truncate correctly. </td
td width="150px">Spacer 2 </td
/tr
/table


Those attribute values are invalid, although a DTD validator won't find
the errors (a linter should). Anyhow, it looks like you actually want

table.tbl {margin: 0 150px}.

table class="tbl"><tr><th>S4L<td>(long sentence)</table

(Consider using '%' or 'em' instead of 'px'.)

What I actually want is 4 columns 'page header', which are perfectly allined
with the data below the header.
So for example S4L will hold a logo. I want the 'long sentence' to be
truncated so that the height of the header is always the same.

Though this works fine, but I would like to set the column width in the
css.

Columns are marked up in HTML by 'col' elements by the way.

table.tbl td.col1 { width: 150px; color: blue; }
td class="col1">Spacer 1</td

This makes my text blue

Sure (for 'col' elements this would only work in browsers without support
for CSS tables and with incorrect inheritance, namely IE).


but does not set my width...

Yes, it does, but under some circumstances might be ignored anyhow. It's
often wise not to set too many widths explicitly. Note that in the fixed
table layout algorithm only the columns or cells of the first row should
set the width.

Thanks, Jean.