I am trying to make the following 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>
Aucun commentaire:
Enregistrer un commentaire