Set a table columns width

HTML & CSS
1

Hi,

I tried to do it by adjusting the <td> width:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Sample Page</title>
<style type="text/css">
div {width:100%; overflow:auto;}
table, td {border:1px solid #000;}
td {width:1000px;}
</style>
</head>
<body>
<div>
<table>
<tr>
<td>First cell</td>
<td>Second cell</td>
<td>Third cell</td>
</tr>
<tr>
<td>Forth cell</td>
<td>Fifth cell</td>
<td>Sixth cell</td>
</tr>
</table>
</div>
</body>
</html>

But it didn’t work.

Many thanks for any help!
Mike

2

TD are designed to fit the available space – that means the outer 100% width will override anything set on the child TD until they all fit. Lose the 100% outer width and you might get the inner ones working… though a better approach would probably be to add table-layout:fixed to the outer table.

Though 1000px? At that point I start to doubt you have tabular data or should even be using TABLE in the first place – much less the accessibility train wreck such a large size would be; so I’m hoping that’s just a test value.

3

Yes! This is the answer to my question. Thank you! :slight_smile:

I’m hoping that’s just a test value.

Yes, that’s right.

4

To set column widths in a table you would attach the width to the <col> or <colgroup> tag by specifying a class on that tag and assigning a width to that class in the CSS.

The widths of the individual <td> tags can’t be set separately as all of the cells in a column must have the same width (subject to any applicable colspan attributes).

5

Thanks for the answer, but that doesn’t seem to work:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Sample Page</title>
<style type="text/css">
div {width:100%; overflow:auto;}
table, td {border:1px solid #000;}
#first {width:1000px;}
#second {width:1000px;}
#third {width:1000px;}
</style>
</head>
<body>
<div>
<table>
<colgroup>
<col id="first">
<col id="second">
<col id="third">
</colgroup>
<tr>
<td>First cell</td>
<td>Second cell</td>
<td>Third cell</td>
</tr>
<tr>
<td>Forth cell</td>
<td>Fifth cell</td>
<td>Sixth cell</td>
</tr>
</table>
</div>
</body>
</html>

The key to set it up correctly is using a fixed layout, either using <col> tags or setting a width to <td> tags.

6

You should note that when when you use width on <col>, it’s basically only doing min-width. It will increase to fit.

Take this example. The key is that the <div> needed a width of 3,000px for the cols to each have 1000px <td>'s (actually it’s probbly 998px or something like that due to borders)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<title>Sample Page</title>
<style type="text/css">
div {width:100%; overflow:auto;}
table, td {border:1px solid #000;}
#first {width:1000px;}
#second {width:1000px;}
#third {width:1000px;}
</style>
</head>
<body>
<div style="width:3000px;">
<table>
<colgroup>
<col id="first" style="width:1000px;background:red">
<col id="second">
<col id="third">
</colgroup>
<tr>
<td>First cell</td>
<td>Second cell</td>
<td>Third cell</td>
</tr>
<tr>
<td>Forth cell</td>
<td>Fifth cell</td>
<td>Sixth cell</td>
</tr>
</table>
</div>
</body>
</html>
7

Which is what table-layout:fixed; prevents.