Shiran Shiran - 5 months ago 9
CSS Question

border spacing property doesn't work

I am trying to make the following table:
table

I have an outer border and one border at the bottom.
I got it all right ,my only problem is that I can't get the space between the outer border and table (space of 20 px)
when I use border-spacing it doesn't work.

I would appreciate your help.

here is a sample of the code:
http://jsbin.com/AcanusA/1/edit

css code:

.outlined
{
font:13px Tahoma;
width: 70%;
border-collapse: collapse;
border: 10px solid #d0d0ff;
margin: 20px;
border-spacing:20px;
}

.center{
text-align: center;
}

.side{
text-align: left;
}

.lastLine{
border-bottom: 2px solid black;
}


html code:

<!DOCTYPE html>
<html>
<title>web programming project 2</title>
<link rel="stylesheet" type="text/css" href="exe2CSS2.css">
<body>

<table class="outlined">
<tr id="headline">
<th class="side">Item</th>
<th class="side">Manufacturer</th>
<th class="side">Size</th>
<th class="center">Unit Price</th>
<th class="center">Quantity</th>
<th class="center">Total Price</th>
</tr>

<tr class="firstCol">
<td class="side">Corn Flakes</td>
<td class="side">Kellogg's</td>
<td class="side">18 0z</td>
<td class="center">2.5</td>
<td class="center">1</td>
<td class="center">2.5</td>
</tr>


<tr class="secondCol">
<td class="side">Solid White Tuna</td>
<td class="side">Starkist</td>
<td class="side">5 oz</td>
<td class="center">2.79</td>
<td class="center">2</td>
<td class="center">5.58</td>
</tr>

<tr class="firstCol">
<td class="side">Cream of Mushroom Soup</td>
(<td class="side">Campbell's</td>
<td class="side">10.75 oz</td>
<td class="center">1.00</td>
<td class="center">2</td>
<td class="center">2.00</td>
</tr>

<tr class="secondCol">
<td class="side">2% Lowfat Milk</td>
<td class="side">Safeway</td>
<td class="side">0.5 gal</td>
<td class="center">1.99</td>
<td class="center">1</td>
<td class="center">1.99</td>
</tr>

<tr class="lastLine">
<td class="side">Extra-Wide Egg Noodles</td>
<td class="side">Golden Grain</td>
<td class="side">12 oz</td>
<td class="center">0.87</td>
<td class="center">3</td>
<td class="center">2.61</td>
</tr>

<tr class="bottom">
<td>Total</td>
<td></td>
<td></td>
<td></td>
<td class="center">9</td>
<td class="center">14.68</td>
</table>

</body>
</html>

Answer

I would just use a container div and put the border on that with some padding:

http://jsbin.com/AcanusA/8/edit

Html becomes:

<div class="outlined-container-1">
<div class="outlined-container-2">
<table class="outlined">
<tr id="headline">
<th class="si .......
</div>
</div>

Additional CSS:

.outlined-container-1
{
width:70%;
}

.outlined-container-2
{
border: 10px solid #d0d0ff;
padding:20px;
}


.outlined
{
  width:100%;
  font:13px Tahoma;
  border-collapse: collapse;
}

Obviously change the outlined name to something more relevant.

Comments