CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
MKJ
MKJ

Reputation: 133

Remove Border from HTML Table

I want to remove borders (horizontal & vertical) lines both from the first row of the below snippet:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <br /><br /><br /><table id="myHeader" class="table  table-bordered table-responsive">
        <tr style="border: none;">
            <td colspan="4" style="border: none;">
                <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>
        <tbody>
            <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>
        </tbody>
    </table>

I tried the below code but no change was detected!

Tried:

<tr style="border: none;">
<td colspan="4" style="border: none;">
<h1 class="text-center">Company</h1>
</td>
</tr>

I don't want any type of line (horizontal & vertical) to be displayed for the first row of the table. i.e: Company one.

Upvotes: 2

Views: 18334

Answers (3)

Olusola Omosola
Olusola Omosola

Reputation: 905

The border property was from the linked stylesheet. Updated your code by adding this - style="border:none !important" to both company and number.
Works fine now. But your code can be cleaner if you separate your css from your html.








    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
        <br /><br /><br /><table id="myHeader" class="table  table-bordered table-responsive">
            <tr style="border: none;">
                <td colspan="4" style="border:none !important" >
                    <h1 class="text-center">Company</h1>
                </td>
            </tr>
            <tr>
                <td colspan="4" style="border:none !important" >
                    <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>
            <tbody>
                <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>
            </tbody>
        </table>







_____________________________________________

Updated Code

    <!DOCTYPE html>
    <html>
    <head>
    <title>Page Title</title>
    </head>
    <body>
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <br /><br /><br /><table id="myHeader" class="table  table-bordered table-responsive" style="border-top:none !important; border-right:none !important; border-left:none !important">
        <tr style="">
            <td colspan="4" style="border:none !important" >
                <h1 class="text-center">Company</h1>
            </td>
        </tr>
        <tr>
            <td colspan="4" style="border:none !important; " >
                <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>
        <tbody>
            <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>
        </tbody>
    </table>

</body>
</html>

Upvotes: 0

Sanchit Patiyal
Sanchit Patiyal

Reputation: 4920

You don't have any border on company but you have border on table and number which is making border around company. Removing them will do the trick

@media print {
  table {
    border: 0 !important;
  }
  
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<br /><br /><br />
<table id="myHeader" class="table  table-bordered table-responsive" style="border:none;">
  <tr class="rem" style="border: none;">
    <td colspan="4" class="rem" style="border: none;">
      <h1 class="text-center">Company</h1>
    </td>
  </tr>
  <tr>
    <td colspan="4" class="rem" style="border:none;">
      <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>
  <tbody>
    <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>
  </tbody>
</table>

Upvotes: 2

sol
sol

Reputation: 22939

Add a @media print rule to your stylesheet, and remove the border on both the table and first cell.

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>

Upvotes: 4

Related Questions