Setting table column widths

Forum Moderators: not2easy

Message Too Old, No Replies

Setting table column widths

px vs. percent

Adam5000

11:01 pm on Sep 30, 2010 (gmt 0)

I've got a three column table and I'm trying to adjust the width of the columns to make the content look pretty on the page.

And I think I'm trying to mix px with percent. I've got the table set at 100%

And I've got the first and second columns set at 250px.

Is there a way to set the width of the third column to the rest of the table width or is this necessary?

Below is the code I'm using, although I don't think "The rest of the table width %" is a valid entry. (Smile).

<style type="text/css">
table
{
width: 100%;
}

td.column_1, column_2
{
width: 250px;
}

td.column_3
{
width: the rest of the table width %;
}

</style>

Major_Payne

12:33 am on Oct 1, 2010 (gmt 0)

I don't think you'll have to worry about column 3 as you set the width of table to 100% and fixed 2 columns. Need to correct this:


td.column_1, column_2
{
width: 250px;
}

Look at the borders and you'll see:


<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title></title>

<meta name="created" content="Fri, 01 Oct 2010 00:33:58 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="PayneLess Designs">
<meta name="copyright" content="Jan 2004 to present.">
<meta name="robots" content="all">
<meta name="revisit-after" content="60 days">

<style type="text/css">
table {
width: 100%;
height: 200px;
border-collapse: collapse;
border: 1px solid #f00;
}

td.column_1, td.column_2 {
width: 250px;
}

td.column_3 {
border: 1px solid #0f0;
</style> 

<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<table>
<tr>
<td class="column_1">Column One</td><td class="column_2">Column 2</td><td class="column_3">Column 3</td>
</tr>
</table>

</body></html>
<!-- HTML 5 Folder | Default HTML -->

Adam5000

12:26 pm on Oct 1, 2010 (gmt 0)

You're right Major. After I cleaned up my CSS code and took out some duplicate entries, the width of the third column took care of itself.

Thanks for your help.

Major_Payne

1:24 pm on Oct 1, 2010 (gmt 0)

You're welcome.