CSS Tables and Column Widths

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Tables and Column Widths

How do I set a fixed column width for all columns?

SilverFox

3:40 pm on Jan 23, 2004 (gmt 0)

How do I fix the column width of all columns in the same table? I've tried putting things like column-width:40px; column:40px; colgroup:40px; colgroup-width:40px; table-width:40px...and more. None seem to work. I've also tried putting these under both the TABLE and TD selectors, but still...nothing. Any suggestions? Could I have other code that prevents these tags from working? Help!

BitBanger

3:47 pm on Jan 23, 2004 (gmt 0)

Use:


<td style="width: 40px;"> ... </td>

Be aware that this will only fix the size of the column if every element in that column would naturally require less space than 40px. Tables and cells will expand to fit the content. Word wrap will work, but if any single word is bigger than the request size, the cell will expand.

DrDoc

4:05 pm on Jan 23, 2004 (gmt 0)

Welcome to Webmaster World, Silverfox!

SilverFox

5:44 pm on Jan 23, 2004 (gmt 0)

I'm sure I'm overlooking the obvious, but that doesn't work.

DrDoc

5:46 pm on Jan 23, 2004 (gmt 0)

How wide is the table as a whole?

SilverFox

5:50 pm on Jan 23, 2004 (gmt 0)

The table has 27 columns. I haven't specified any widths.

DrDoc

5:53 pm on Jan 23, 2004 (gmt 0)

So, you want all of them to be 40px, or just the same width?

SilverFox

5:57 pm on Jan 23, 2004 (gmt 0)

I was just using 40px as an example. My objective is to make them all equal width. Each cell has text, so naturally, I'd want them all to be as wide as the largest cell.

DrDoc

6:34 pm on Jan 23, 2004 (gmt 0)

Then, how about something like this:

<html>
<head>
<title>Untitled</title>
<style type="text/css">
table {
border-collapse: collapse;
border: 1px solid black;
width: 100%;
}
td {
border: 1px solid black;
width: 3.7%;
}
</style>
</head>
<body>
<table id="mytable">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<script type="text/javascript">
widestCell = 0;
theObj = document.getElementById('mytable').firstChild.firstChild.firstChild;
if(theObj.clientWidth > widestCell) widestCell = theObj.clientWidth;
for(foo=1;foo<27;foo++) {
theObj = theObj.nextSibling;
if(theObj.clientWidth > widestCell) widestCell = theObj.clientWidth;
}
document.getElementById('mytable').style.width = (27 * widestCell) + "px";
theObj = document.getElementById('mytable').firstChild.firstChild.firstChild;
theObj.style.width = widestCell + "px";
for(foo=1;foo<27;foo++) {
theObj = theObj.nextSibling;
theObj.style.width = widestCell + "px";
}
document.write("Widest cell: " + widestCell + "px<br>Total width: " + (27 * widestCell) + "px");
</script>
</body>
</html>

Fill the cells with content and refresh the page...

SilverFox

6:56 pm on Jan 23, 2004 (gmt 0)

Wow. You're good. Thanks!