...

View Full Version : CSS - table column widths not responding



tonyagirl
04-07-2011, 10:53 PM
Hi, my CSS code is not having any effect on my table's column widths and I can't figure out why..

I want the whole table to be 494px long. I tried

width: 148px 49px 100px 148px 49px;
and

width: 30% 10% 20% 30% 10%;
with and without width: 494px or 100% in the table.jdmprices.... So I don't know what's up!

Here is my code without any cell width specification:



<style type="text/css">
table.jdmprices {
clear: both;
margin: 10px auto;
border-collapse: collapse;
font-size: 1.1em;
}
table.jdmprices th {
font-size: 1.5em;
text-align: left;
clear: left;
line-height: 150%;
padding: 2px 4px;
color: #24355E;
}
table.jdmprices th.header2 {
padding: 2px 15px;
text-transform: uppercase;
text-align: left;
font-size: 1em;
color: #000;
background-color: #FFFF80;
}
table.jdmprices td {
padding: 2px 4px;
text-align: left;
}
table.jdmprices tr.alt {
background-color: #F3F3F3;
}
</style>

<table class="jdmprices" border="1">
<tr>
<th colspan="5">Header</th>
</tr>
<tr>
<th colspan="5" class="header2">description</th>
</tr>
<tr>
<td colspan="5">Product</td>
</tr>
<tr>
<td>size</td>
<td>$price</td>
<td></td>
<td>size</td>
<td>$price</td>
</tr>
</table>

quartzy
04-08-2011, 01:56 AM
Can you post the mark up for the table

tonyagirl
04-08-2011, 07:20 PM
You mean this:


<table class="jdmprices" border="1">
<tr>
<th colspan="5">Header</th>
</tr>
<tr>
<th colspan="5" class="header2">description</th>
</tr>
<tr>
<td colspan="5">Product</td>
</tr>
<tr>
<td>size</td>
<td>$price</td>
<td></td>
<td>size</td>
<td>$price</td>
</tr>
</table>

teedoff
04-08-2011, 07:38 PM
Strange coding and css rules. You've defined FIVE values for the widths??

Last I heard there is only top, right, bottom, and left.

Then you keep saying you want the table to be "this" long, but widths have to do with...well width.

Now, having said all that, if you want to simply tell a table to be a certain width, then in your css:


table {width: 494px;}
works fine.

You could also simply use the inline method:


<table width="494" border="1">

Now, it seems like you are displaying columnar data, but if not you should read why tables for layouts are bad (http://www.hotdesign.com/seybold/).

But I suspect you're trying to specify column widths correct? Hence the 5 values. You need to style the <td> or <th> tag instead of the WHOLE table then.

tonyagirl
04-08-2011, 07:58 PM
Okay well thanks. I changed my mind and went with a different layout using less table.

The 5 widths were for the 5 cells.

Thanks for the website though. Was very interesting.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum