CODEWITHSUNDEEP
html
Kar
Kar

Reputation: 321

HTML table tr with no borders

I need to create an invoice with HTML table, td, tr. I need something like this

enter image description here

that every item in the invoice is in a new row, but a row without border. I have tried to add a class for tr element 

 border: 0px solid black;

but it is not working properly. Can you advise please?

In this snippet is created a table, but there are borders everywhere 

<!DOCTYPE html>
<html>
<head>
<style>
thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}

table, th, td {
    border: 1px solid black;
}
</style>
</head>

<body>

<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>


</body>
</html>

Upvotes: 0

Views: 14173

Answers (3)

Jay
Jay

Reputation: 348

You can use a specific class with style property border:0 to remove the borders form individual row. Find the solution (on top of your snippet) below:- 

tr.noBorder td {
  border: 0;
}
tr.noBorder td:first-child {
  border-right: 1px solid;
}
<!DOCTYPE html>
<html>
<head>
<style>
thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}

table, th, td {
    border: 1px solid black;
}
</style>
</head>

<body>

<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
  <tbody>
    <tr class="noBorder">
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr class="noBorder">
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>


</body>
</html>

Upvotes: 0

Kathirirajan
Kathirirajan

Reputation: 154

Use Border style in CSS like below to remove Border of <tr> <td> in Table.

border-right:none;
border-left:none;
border-bottom:none;
border-top:none

Is it solved ?

Upvotes: 5

Ali Sheikhpour
Ali Sheikhpour

Reputation: 11055

Set border for table but for cells you have to specify a custom class to each cell according to its position. I suggest 4 kinds of borders on top, right,bootm and left. Also do not forget to set border-collapse for table to collapse TD borders on each others:

table {
   border:1px solid #000000;
   border-collapse:collapse;
}

td{
   padding:10px;
}
.tB{
  border-top:1px solid #000000
}
.rB{
  border-right:1px solid #000000
}
.bB{
  border-bottom:1px solid #000000
}
.lB{
  border-left:1px solid #000000
}
<table>
<tr>
   <td class="rB">test</td>
   <td class="bB">test</td>
</tr>
<tr>
   <td class="rB bB">test</td>
   <td class="bB">test</td>
</tr>
</table>

Upvotes: 0

Related Questions