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:
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
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
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>
HTML<div class="table-container">
<table>
...
</table>
</div>
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?
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?
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
Working sample here
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>
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>
Working sample here
ASKER
The following is in the css inclusion:
The following is in the display inclusion:
.table-container {
padding: 0 5px;
box-sizing: border-box;
width: 100%;
}
table {
width: 100%;
}
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
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.
As you can see from the sample I posted the code works - so it is down to implementation.
ASKER
Yeah, that's what I thought.
Here's the url
http://mrbreeze.net/test/i ndex.php
Login: LSI
Password: sales
Click on "Exclusives" and you can see what happens.
Thanks
Here's the url
http://mrbreeze.net/test/i
Login: LSI
Password: sales
Click on "Exclusives" and you can see what happens.
Thanks
It is working - increase your padding to 50px to see how.
ASKER
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks
You are welcome
Open in new window