line inside html table

Question

I'm trying to use both padding and border-bottom in html to get this table:

But in order to make the border-bottom one line I added border-collapse: collapse; and now I don't have padding, how can I use both?

here is my html code:

<html>
<head>
<link rel="stylesheet" type="text/css" href="exe2CSS3.css">
</head>
<body>
<table>
<div>
<tr>
<th>Item</th>
<th>Manufacturer</th>
<th>Size</th>
<th>Unit Price</th>
<th>Quantity</th>
<th>Total Price</th>
</tr>
<tr class="even">
<td>Corn Flakes</td>
<td>Kellogg's</td>
<td>18 oz.</td>
<td class="center">2.50</td>
<td class="center">1</td>
<td class="center">2.50</td>
</tr>
<tr class="odd">
<td>Solid White Tuna</td>
<td>Starkist</td>
<td>5 oz</td>
<td class="center">2.79</td>
<td class="center">2</td>
<td class="center">5.58</td>
</tr>
<tr class="even">
<td>Cream of Mushroom Soup</td>
<td>Campbell's</td>
<td>10.75 oz</td>
<td class="center">1.00</td>
<td class="center">2</td>
<td class="center">2.00</td>
</tr>
<tr class="odd">
<td>2% Lowfat Milk</td>
<td>Safeway</td>
<td>0.5 gal</td>
<td class="center">1.99</td>
<td class="center">1</td>
<td class="center">1.99</td>
</tr>
<tr class="even line">
<td>Extra-Wide Egg Noodles</td>
<td>Golden Grain</td>
<td>12 oz</td>
<td class="center">0.87</td>
<td class="center">3</td>
<td class="center">2.61</td>
</tr>
<tr class="hide">
<th>Total</th>
<th></th>
<th></th>
<th></th>
<th class="center">9</th>
<th class="center">14.68</th>
</tr>
</div>
</table>
</body>
</html>

and my css code:

table {    
font-family:Tahoma; font-size:13px; border: 10px solid #d0d0ff; margin: 
25px 0 0 25px; border-collapse: collapse; padding: 20px 20px 20px 20px;
}
th { text-align:left; padding: 0 10px; }
{td,th}.center { text-align:center; }
td { padding: 0 10px;}     
tr.line { border-bottom: 2px solid black; }

Please post html also as we are not aware of html structure. — Leo the lion, Apr 12 '16 at 11:34

score 5 · Accepted Answer · answered Apr 12 '16 at 11:53

You have errors in your HTML and your CSS. After correcting those, all that's needed is to set border-spacing: 0 instead of border-collapse: collapse. Then it seems to work well.

table {
  font-family: Tahoma;
  font-size: 13px;
  border: 10px solid #d0d0ff;
  margin: 25px 0 0 25px;
  border-collapse: separate;
  border-spacing:0;
  padding: 20px;
}

th, td {
  text-align: left;
  padding: 0 10px;
}
th.center, td.center {
  text-align: center;
}

tbody tr:last-child td {
  border-bottom: 2px solid black;
}

<table>
  <thead>
    <tr>
      <th>Item</th>
      <th>Manufacturer</th>
      <th>Size</th>
      <th>Unit Price</th>
      <th>Quantity</th>
      <th>Total Price</th>
    </tr>
  </thead>
  <tbody>
    <tr class="even">
      <td>Corn Flakes</td>
      <td>Kellogg's</td>
      <td>18 oz.</td>
      <td class="center">2.50</td>
      <td class="center">1</td>
      <td class="center">2.50</td>
    </tr>
    <tr class="odd">
      <td>Solid White Tuna</td>
      <td>Starkist</td>
      <td>5 oz</td>
      <td class="center">2.79</td>
      <td class="center">2</td>
      <td class="center">5.58</td>
    </tr>
    <tr class="even">
      <td>Cream of Mushroom Soup</td>
      <td>Campbell's</td>
      <td>10.75 oz</td>
      <td class="center">1.00</td>
      <td class="center">2</td>
      <td class="center">2.00</td>
    </tr>
    <tr class="odd">
      <td>2% Lowfat Milk</td>
      <td>Safeway</td>
      <td>0.5 gal</td>
      <td class="center">1.99</td>
      <td class="center">1</td>
      <td class="center">1.99</td>
    </tr>
    <tr class="even">
      <td>Extra-Wide Egg Noodles</td>
      <td>Golden Grain</td>
      <td>12 oz</td>
      <td class="center">0.87</td>
      <td class="center">3</td>
      <td class="center">2.61</td>
    </tr>
  </tbody>
  <tfoot>
    <tr class="hide">
      <th>Total</th>
      <th></th>
      <th></th>
      <th></th>
      <th class="center">9</th>
      <th class="center">14.68</th>
    </tr>
</table>

Note that I also took the liberty of dividing the table in a thead, a tbody and a tfoot. With such a structure, you won't need tricks like class="line" to indicate the tr that needs the line; this can now be determined automatically (it's the last tr in the tbody).

Ah, beat me to the spacing. +1 for the footer too – mplungjan Apr 12 '16 at 11:57 — mplungjan, Apr 12 '16 at 11:57

mplungjan · Answer 2 · 2016-04-12T11:56:42.337

Does this help?

Using table border-spacing: 0;

tr.line td {
  border-top: 2px solid black;
}

works

table {
  font-family: Tahoma;
  font-size: 13px;
  border: 10px solid #d0d0ff;
  margin: 25px 0 0 25px;
  padding: 20px 20px 20px 20px;
  border-spacing: 0;
}
th {
  text-align: left;
  padding: 0 10px;
}
td, th { } 
.center {
  text-align: center;
}
td {
  padding: 0 10px;
}
tr.line td {
  border-top: 2px solid black;
}

<table>
  <thead>
    <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
      <th>D</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>AA</td>
      <td>BB</td>
      <td>CC</td>
      <td>DD</td>
    </tr>
    <tr>
      <td>AA</td>
      <td>BB</td>
      <td>CC</td>
      <td>DD</td>
    </tr>
    <tr>
      <td>AA</td>
      <td>BB</td>
      <td>CC</td>
      <td>DD</td>
    </tr>
    <tr>
      <td>AA</td>
      <td>BB</td>
      <td>CC</td>
      <td>DD</td>
    </tr>
    <tr>
      <td>AA</td>
      <td>BB</td>
      <td>CC</td>
      <td>DD</td>
    </tr>
    <tr class="line">
      <td></td>
      <td></td>
      <td>Sum C</td>
      <td>Sum D</td>
    </tr>
  </tbody>
</table>

score 0 · Answer 3 · edited May 23 '17 at 10:28

HTML tables have a different display property than divs and they behave differently.

table {
  border-collapse: collapse;
}
tbody {
    border-bottom: 2px solid black;
    border-collapse: separate;
    border-spacing: 4px; 
}

 <table style="width:50%">
 <thead>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Points</th>
  </tr>   
 </thead>
  <tbody>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>    
  </tbody>
  <tfoot>
    <tr>
      <th>total</th>
      <td></td>
      <td>282</td>
    </tr>
  </tfoot>
</table>

Also on jsfiddle: https://jsfiddle.net/c6mwh2cL/

Also check out this answer: tbody border not showing

Also, avoid putting <div> inside a table. A table should only have <thead>, <tbody> and <tfoot> elements, and those should only have <tr> elements, and those should only have <th> and <td>. The semantic has it's purpose and this is how it's meant to be rendered.

line inside html table

3 Answers3