Html Table Tr With No Borders

body {  /* for demo */  margin: 20px !important;}
#myHeader > tbody tr:first-of-type td {  border-color: #f9f9f9;  border-bottom: 0;}
#myHeader tr:nth-of-type(2) td {  border-top: none;}
@media print {  table {    border: 0 !important;  }  #myHeader tr:first-of-type td {    border: 0 !important;  }}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /><table id="myHeader" class="table table-striped table-hover table-bordered table-responsive">  <tr>    <td colspan="4">      <h1 class="text-center">Company</h1>    </td>  </tr>  <tr>    <td colspan="4">      <h1 class="text-center">Number</h1>    </td>  </tr>  <tr>    <td colspan="2">      <h3><span style="float: left;">Cutomer (Invoice No.)</span></h3>    </td>    <td colspan="2">      <h3><span style="float: right;">Date</span></h3>    </td>  </tr>  <tr>    <th>Sr.</th>    <th>Item</th>    <th>Qty</th>    <th>Amount</th>  </tr>
    <tr>      <td>1</td>      <td>Shirt (D.C)</td>      <td>5</td>      <td>200</td>    </tr>    <tr>      <td>2</td>      <td>Shirt (Iron)</td>      <td>5</td>      <td>200</td>    </tr>    <tr>      <td></td>      <td></td>      <td></td>      <td></td>    </tr>    <tr>      <td colspan="2"><strong>Four Hundred Rupees Only</strong></td>      <td><strong>Total:</strong></td>      <td><strong>400</strong></td>    </tr>
</table>

How to completely remove borders from HTML table

<table cellspacing="0" cellpadding="0">

And in css:

table {border: none;}

EDIT:
As iGEL noted, this solution is officially deprecated (still works though), so if you are starting from scratch, you should go with the jnpcl's border-collapse solution.

I actually quite dislike this change so far (don't work with tables that often). It makes some tasks bit more complicated. E.g. when you want to include two different borders in same place (visually), while one being TOP for one row, and second being BOTTOM for other row. They will collapse (= only one of them will be shown). Then you have to study how is border's "priority" calculated and what border styles are "stronger" (double vs. solid etc.).

I did like this:

<table cellspacing="0" cellpadding="0">
  <tr>
    <td class="first">first row</td>
  </tr>
  <tr>
    <td class="second">second row</td>
  </tr>
</table>

----------

.first {border-bottom:1px solid #EEE;}
.second {border-top:1px solid #CCC;}

Now, with border collapse, this won't work as there is always one border removed. I have to do it in some other way (there are more solutions ofc). One possibility is using CSS3 with box-shadow:

<table class="tab">
  <tr>
    <td class="first">first row</td>
  </tr>
  <tr>
    <td class="second">second row</td>
  </tr>
</table>​​​

<style>
.tab {border-collapse:collapse;}
.tab .first {border-bottom:1px solid #EEE;}
.tab .second {border-top:1px solid #CCC;box-shadow: inset 0 1px 0 #CCC;}​
</style>

You could also use something like "groove|ridge|inset|outset" border style with just a single border. But for me, this is not optimal, because I can't control both colors.

Maybe there is some simple and nice solution for collapsing borders, but I haven't seen it yet and I honestly haven't spent much time on it. Maybe someone here will be able to show me/us ;)

HTML table borders not showing

Initial a table has no styles. You have to style it on your own.

Here is minimalistic working example:

table {
  border-collapse: collapse;
}

td,
th {
  border: 1px solid black;
}

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Type</th>
      <th>Amount</th>
      <th>Date</th>
      <th>Category</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>This name</td>
      <td>This type</td>
      <td>200$</td>
      <td>2021-03-04</td>
      <td>Travel</td>
    </tr>
  </tbody>
</table>

table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

table {
  border: 1px solid #ccc;
  color: #37393b;
  margin: 10px 0 0 0;
  text-shadow: #fff 1px -1px 1px;
  text-align: left;
  width: 100%;
}

table tbody tr td {
  background: #FFF;
  border-bottom: 1px dotted #d00;
}

tr.no-bottom-border td {
  border-bottom: none
}

<table cellpadding="5">
  <thead>
    <tr valign="top">
      <th>Title</th>
      <th>Title 2</th>
      <th>Title 3</th>
      <th>Title 4</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Test Entry</td>
      <td>Test Entry</td>
      <td>Test Entry</td>
      <td>Test Entry</td>
    </tr>

    <tr>
      <td>Test Entry</td>
      <td>Test Entry</td>
      <td>Test Entry</td>
      <td>Test Entry</td>
    </tr>

    <tr class="no-bottom-border">
      <td>Test Entry</td>
      <td>Test Entry</td>
      <td>Test Entry</td>
      <td>Test Entry</td>
    </tr>
    <tr>
      <td>Test Entry</td>
      <td>Test Entry</td>
      <td>Test Entry</td>
      <td>Test Entry</td>
    </tr>
  </tbody>
</table>

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

td {
    border: none;
}

table {
  border-collapse: collapse;
}