Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jun 2010
    Posts
    43
    Thanks
    12
    Thanked 0 Times in 0 Posts

    simple table formatting help

    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.

    Code:
    <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&frac12;''</td>
    			<td>2 &frac34;'' 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>
    Last edited by sterlingcooper; 07-06-2011 at 06:14 PM.

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    set the width of the table to 100%;

    Code:
    .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!
    Last edited by Sammy12; 07-06-2011 at 08:57 AM.

  • #3
    New Coder
    Join Date
    Jun 2010
    Posts
    43
    Thanks
    12
    Thanked 0 Times in 0 Posts
    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.

    Code:
    <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>
    Last edited by sterlingcooper; 07-06-2011 at 09:03 AM.

  • #4
    New Coder
    Join Date
    Jun 2010
    Posts
    43
    Thanks
    12
    Thanked 0 Times in 0 Posts
    I fixed it. I gave the th a colspan of two, and this stopped the text underneath from having the extra gap.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •