How to set column width of a table in ccs

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Jean Pion - 21 Jul 2005 13:19 GMT

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.

Reply to this Message

logic_earth - 21 Jul 2005 23:43 GMT

> 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

Reply to this Message

Jean Pion - 22 Jul 2005 00:20 GMT

>> 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

Reply to this Message

Christoph Päper - 22 Jul 2005 14:02 GMT

Jean Pion:

> text-overflow:ellipsis;

Do you really expect proposed CSS3 properties to work?

> <table class="tbl">
> <tr>
[quoted text clipped - 4 lines]
> </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.

Reply to this Message

Jean Pion - 25 Jul 2005 09:01 GMT

> 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>
[quoted text clipped - 13 lines]
>
> (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.
[quoted text clipped - 15 lines]
> table layout algorithm only the columns or cells of the first row should
> set the width.

Thanks, Jean.

Reply to this Message

Gérard Talbot - 29 Jul 2005 21:27 GMT

Jean Pion wrote :

> 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;

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.html#propdef-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>
[quoted text clipped - 13 lines]
>
> 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

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / July 2005

How to set column width of a table in ccs