Avatar of breeze351
breeze351
 asked on

Add a little space on either side of a table.

I have some code that works Ok, but now they want a little space on the left and right.  I've tried several solutions and I can't figure out what the code needs to be. Does the total of the table columns have to be less than 100%?

Here's the code:
<table id= "Three_Line_Display" style="margin-left: 5px auto; margin-right: 5px auto;" border="0" cellspacing="0" cellpadding="0">
	<?php
		// Create table header
		echo "<tr>";	
		echo '<td width = 20% class="Body_Labels" align="left">Address</td>';
		echo '<td width = 25% class="Body_Labels" align="left">Contact</td>';
		echo '<td width = 9% class="Body_Labels" align="center">Size</td>';
		echo '<td width = 9% class="Body_Labels" align="center">Rental</td>';
		echo '<td width = 12% class="Body_Labels" style="padding-left: 10px" align = "left">Possession</td>';		
		echo '<td width = 13% class="Body_Labels" style="padding-left: 10px" align = "left">Term</td>';
		echo '<td width = 8% class="Body_Labels" style="padding-left: 10px" align = "left">List/Update</td>';
		echo '<td width = 14% class="Body_Labels" align="center">Image</td>';
		echo '</tr>';
		
		// End Table Header 	

Open in new window

HTML

Avatar of undefined
Last Comment
Julian Hansen

8/22/2022 - Mon
Dr. Klahn

This lets the content table autosize, while the left and right spacing is fixed.  Note the WIDTH attribute will NOT work in HTML 5.

<TABLE BORDER="0" CELLSPACING="0"><TR>
<TD WIDTH="15px">&nbsp;</TD>
<TD>(insert your table here)</TD>
<TD WIDTH="15px">&nbsp;</TD>
</TR></TABLE>

Open in new window

Julian Hansen

Please note the width, border and cellspacing attributes have been deprecated in HTML 5 and should not be used. CSS should be used to style elements.

Yes your <td> widths should add up to 100%

You can put your table in a container and then give the container padding
CSS
<style>
.table-container {
   padding: 0 5px;
   box-sizing: border-box;
   width: 100%;
}
table {
  width: 100%;
}
</style>

Open in new window

HTML
<div class="table-container">
   <table>
       ...
   </table>
</div>

Open in new window

breeze351

ASKER
Julian
I added your code, it did work for the left and right.  However, it also added space between the columns.  Is it "box-sizing" that doing this?
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
Julian Hansen

No box-sizing means include padding in the width - default is to add padding and borders to the width.

Can you post your implementation
Here is mine
CSS
<style type="text/css">
.table-container {
  box-sizing: border-box;
  padding: 0 5px;
  background: green;
  width: 100%;
}
.table {
  background: #fff;
}
</style>

Open in new window

HTML
  <div class="table-container">
    <table class="table">
      <tr>
        <td width = "20%" class="Body_Labels" align="left">Address</td>  
        <td width = "25%" class="Body_Labels" align="left">Contact</td>  
        <td width = "9%" class="Body_Labels" align="center">Size</td>  
        <td width = "9%" class="Body_Labels" align="center">Rental</td>  
        <td width = "12%" class="Body_Labels" style="padding-left: 10px" align = "left">Possession</td>      
        <td width = "13%" class="Body_Labels" style="padding-left: 10px" align = "left">Term</td>  
        <td width = "8%" class="Body_Labels" style="padding-left: 10px" align = "left">List/Update</td>  
        <td width = "14%" class="Body_Labels" align="center">Image</td>  
      </tr>
    </table>
  </div>

Open in new window


Working sample here
breeze351

ASKER
The following is in the css inclusion:
.table-container {
   padding: 0 5px;
   box-sizing: border-box;
   width: 100%;
}
table {
  width: 100%;
}	

Open in new window


The following is in the display inclusion:
<div class="table-container">
<table id= "Three_Line_Display">
	<?php
		// Create table header
		echo "<tr>";	
		echo '<td width = 20% class="Body_Labels" align="left">Address</td>';
		echo '<td width = 25% class="Body_Labels" align="left">Contact</td>';
		echo '<td width = 9% class="Body_Labels" align="center">Size</td>';
		echo '<td width = 9% class="Body_Labels" align="center">Rental</td>';
		echo '<td width = 12% class="Body_Labels" style="padding-left: 10px" align = "left">Possession</td>';		
		echo '<td width = 13% class="Body_Labels" style="padding-left: 10px" align = "left">Term</td>';
		echo '<td width = 8% class="Body_Labels" style="padding-left: 10px" align = "left">List/Update</td>';
		echo '<td width = 14% class="Body_Labels" align="center">Image</td>';
		echo '</tr>';
echo "</div>";		
		// End Table Header

Open in new window

Julian Hansen

And how does that not work - do you have a link to show us or a screen shot?

As you can see from the sample I posted the code works - so it is down to implementation.
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
breeze351

ASKER
Yeah, that's what I thought.

Here's the url
http://mrbreeze.net/test/index.php

Login: LSI
Password: sales

Click on "Exclusives" and you can see what happens.

Thanks
Julian Hansen

It is working - increase your padding to 50px to see how.
breeze351

ASKER
Maybe you did not understand my question.
The attached image has the screen.  Where is the white space comping from between the values?  The white space on the left and right of the table works for me.
exc.JPG
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
ASKER CERTIFIED SOLUTION
Julian Hansen

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
breeze351

ASKER
Thanks
Julian Hansen

You are welcome