473,245 Members | 1,658 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,245 software developers and data experts.

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.


Jul 24 '05 #1
5 169682
> 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

Jul 24 '05 #2
"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
Jul 24 '05 #3
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.
Jul 24 '05 #4

"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.
Jul 25 '05 #5
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
Jul 29 '05 #6

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: Tim Nelson | last post by:
I thought there should be simple way of setting the column width in the a DataGrid. I've set up a table style (properties tab) that lengthen the columns, but I can't seem to bind this table style...
2
by: nj | last post by:
I am trying to set the width of a single column in the datagrid. What is happening is the column seems to stretch to try to accomodate the length of the data contained in it. I want to have it only x...
3
by: Mike Fellows | last post by:
Im trying to set the column width of individual datgrid columns I can set the column widths of all the columns at once using Me.DataGrid1.PreferredColumnWidth = 100 But I am unable to set the...
18
by: chimalus | last post by:
I am using a table with no column widths specified, letting the table layout manager do its thing for figuring out the column widths, and this works just fine. Now I want to make the table...
3
by: Aziz | last post by:
1. I have a shopping basket DataGrid with a list of products. What I want to do is when the user clicks on a row, a button will become visible/be created that allows user to edit the quantity. The...
2
by: Charleees | last post by:
Hi all, I have a DataGrid with Template Columns..... There are LAbels,Linkbuttons in the Single Row.. I have to set the Constant Column width for those Template Columns in Grid... Wat...
0
by: Claire | last post by:
Hi, Visual Studio 2003 The application Im writing is skinned and therefore i need to be able to write my own code for manipulating and drawing headers for a data grid outside of the control. I...
1
by: asearle | last post by:
Hi everyone, I have a table which, in order to line up with other information, needs to have very exact column widths. So far I have implemented the following with normal HTML tables ... <td...
4
by: Yin99 | last post by:
I have a Gridview binding to a DataTable source. I'd like to set the column with of the second column. I cannot do this apparently because when AutoGenerateColumns=true, they do not appear in the...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: marcoviolo | last post by:
Dear all, I would like to implement on my worksheet an vlookup dynamic , that consider a change of pivot excel via win32com, from an external excel (without open it) and save the new file into a...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.