Resolved simple table formatting help [Archive]

...

View Full Version : Resolved simple table formatting help

sterlingcooper

07-06-2011, 07:49 AM

Hi,
I have a table set up with HTML and CSS and I am happy with it except that I'm not sure how to make the table not stretch but to stay a certain width.

If you look at the code, the th of "Retail Price" adds too much space to the numbers underneath. I need the 1, 2-24 etc. ths to be consistently spaced.

Any thoughts on how I could fix this?

Thanks much.

<html>
<style type="text/css">

body
{
line-height: 1.6em;
}

.catalogPrice
{
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 12px;
/*background: #fff;*/
/*margin: 45px;*/
width: 1000px;
border-collapse: collapse;
text-align: left;
}
.catalogPrice th
{
font-size: 14px;
font-weight: bold;
color: black;
/*padding: 10px 8px;*/
padding-right: 8px;
padding-left: 8px;
padding-bottom: 1px;
/*border-bottom: 2px solid #6678b1;*/
}
.catalogPrice td
{
border-bottom: 1px solid #ccc;
color: gray;
font-size: 13px;
padding: 6px 8px;
}

</style>
<body>

<div class="catalogPriceWrapper">
<table class="catalogPrice">
<thead>

<tr>
<th scope="col"></th>
<th scope="col"></th>

<th scope="col">Overall Size</th>
<th scope="col">Printable</th>
<th scope="col">Retail Price Goes Underneath This Long Line here. </th>
</tr>
<tr>
<th scope="col">Description</th>
<th scope="col">Style No.</th>
<th scope="col">(WxH)</th>
<th scope="col">Area</th>
<th scope="col">1</th>
<th scope="col">2-24</th>
<th scope="col">25-99</th>
<th scope="col">100+</th>
</tr>
</thead>
<tbody>
<tr>
<td>Product Name</td>
<td>ABCDE</td>
<td>6'' x 8'' x 2 1½''</td>
<td>2 ¾'' x 5''</td>

<td>$74.50</td>
<td>$68.02</td>
<td>$67.59</td>
<td>$66.94 <strong>(P)</strong></td>

</tr>

</tbody>
</table>
</div>

</body>
</html>

Sammy12

07-06-2011, 07:55 AM

set the width of the table to 100%;

.catalogprice {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 12px;
width: 1000px;
border-collapse: collapse;
text-align: left;
}

all computer screen sizes are different, so make sure you set width too 100%;, then each ".catalogprice td" to width: 10%; The width of the td's combined should equal 100%; Gonna have to do some math!

sterlingcooper

07-06-2011, 08:00 AM

Hi Sammy,
Thanks for responding so quickly.

With 100% I still get the gap between 1 and 2-24. I mean I know the table is working properly, it's wanting the width of the table to be where the word "price" ends. If I remove the word price, everything lines up better. But both words have to be in there.

<html>
<style type="text/css">

body
{
line-height: 1.6em;
}

.catalogPrice
{
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 12px;
/*background: #fff;*/
/*margin: 45px;*/
/*width: 800px;*/
width:100%;
border-collapse: collapse;
text-align: left;
}
.catalogPrice th
{
font-size: 14px;
font-weight: bold;
color: black;
/*padding: 10px 8px;*/
padding-right: 8px;
padding-left: 8px;
padding-bottom: 1px;
/*border-bottom: 2px solid #6678b1;*/
}
.catalogPrice td
{
border-bottom: 1px solid #ccc;
color: gray;
font-size: 13px;
padding: 6px 8px;
}

</style>
<body>

<div class="catalogPriceWrapper">
<table class="catalogPrice">
<thead>

<tr>
<th scope="col"></th>
<th scope="col"></th>

<th scope="col">Overall Size</th>
<th scope="col">Printable</th>
<th scope="col">Retail Price </th>
</tr>
<tr>
<th scope="col">Description</th>
<th scope="col">Style No.</th>
<th scope="col">(WxH)</th>
<th scope="col">Area</th>
<th scope="col">1</th>
<th scope="col">2-24</th>
<th scope="col">25-99</th>
<th scope="col">100+</th>
</tr>
</thead>
<tbody>
<tr>
<td>Product Name</td>
<td>ABCDE</td>
<td>6'' x 8'' x 2 1½''</td>
<td>2 ¾'' x 5''</td>

<td>$74.50</td>
<td>$68.02</td>
<td>$67.59</td>
<td>$66.94 <strong>(P)</strong></td>

</tr>

</tbody>
</table>
</div>

</body>
</html>

sterlingcooper

07-06-2011, 05:13 PM

I fixed it. I gave the th a colspan of two, and this stopped the text underneath from having the extra gap.