homepage Welcome to WebmasterWorld Guest from 54.211.157.103
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Setting table column widths
px vs. percent
Adam5000




msg:4209642
 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




msg:4209668
 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




msg:4209865
 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




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

You're welcome.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved