How to set column width of a table in ccs

[Jean Pion]

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.

[logic_earth]

> 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

[Jean Pion]

"logic_earth" <lo********@gmail.com> wrote in message
news:11**********************@z14g2000cwz.googlegr oups.com...

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]

Jean Pion:

text-overflow:ellipsis;
Do you really expect proposed CSS3 properties to work?
<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'.)
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.

[Jean Pion]

"Christoph Päper" <ch**************@nurfuerspam.de> schreef in bericht
news:db**********@ariadne.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.

[Gérard Talbot]

Jean Pion wrote :

Dear readers,

Can anyone explain how to set column width of a table in ccs.
<table>
<col width="150"><col width="50"><col><col width="150">
[...]
</table>
I use the following style in an external stylesheet:

table.tbl { table-layout:fixed;
table-layout: fixed;
I'm not sure this will work as intended if you miscode the width of
table cells in the first row.

http://www.w3.org/TR/CSS21/tables.ht...f-table-layout
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; }
text-overflow: ellipsis;
won't work in many browsers.
overflow: hidden; and white-space: nowrap;
is rather strange. What are you trying to do exactly?
Your code wants to prevent line-wrapping and then hide the overflowed
content.

From the very start, you should ask yourself if you are properly,
correctly using tables to begin with: your example suggest you are using
a table to hold non-tabular data.

Now I define the table as follows:

<table class="tbl">
<tr>
<td width="150px">Spacer 1</td>
As mentioned by others, width should take a numerical value.
<td width="50px">S4L</td>
<td width="*">This is a long sentence that will hopefully truncate
correctly. </td>
Invalid code here: width="*"
If you want that table cell to use as much width as needed, then do not
set any value to width. Just don't declare an width attribute
specification for that cell.
<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.

The width of a column is set by the largest, widest table cell in it,
set itself by its content if the width is not specified. I'd say 90% of
problems related to tables is overconstraining tables.
You should not try to over-constrain your table to begin with. And you
should use table for tabular data and not for text.

My 2 cents

Gérard
--
remove blah to email me