从 Table 中仅删除水平边框

Question

我只想去掉横线

意思是行不应该有线，列应该有线。

在我的代码中，行和列都没有行。

我试过了：

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <style>
    #chiru_inv>tbody tr:first-of-type td {
      border-color: #f9f9f9;
      border-bottom: 0;
    }
    
    #chiru_inv tr:nth-of-type(2) td {
      border-top: none;
    }
    
    #chiru_inv>tbody tr:nth-of-type(2) td {
      border-color: #f9f9f9;
      border-bottom: 0;
    }
    
    #chiru_inv tr:nth-of-type(3) td {
      border-top: none;
    }
    
    #chiru_inv>tbody tr:nth-of-type(3) td {
      border-color: #f9f9f9;
      border-bottom: 0;
    }
    
    #chiru_inv tr:nth-of-type(4) td {
      border-top: none;
    }
    
    @media print {
      table {
        border: 0 !important;
      }
      #chiru_inv tr:first-of-type td {
        border: 0 !important;
      }
      #chiru_inv tr:nth-of-type(2) td {
        border: 0 !important;
      }
      #chiru_inv tr:nth-of-type(3) td {
        border: 0 !important;
      }
    }
  </style>
</head>


<body>
  <center>
    <table id="chiru_inv" class="table table-striped table-hover table-bordered table-responsive">
      <tr>
        <td colspan="4" align="center">
          <h1>Company<br /><span style="font-size: 75%;">Number</span></h1>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <h3><span style="float: left;">Demo&nbsp;(2)</span></h3>
        </td>
        <td colspan="2">
          <h3><span style="float: right;">2017-11-16 12:18:15</span></h3>
        </td>
      </tr>
      <tr>
        <th>Sr.</th>
        <th>Item</th>
        <th>Qty</th>
        <th>Amount</th>
      </tr>

      <tr>
        <td style="border:none !important">
          1 </td>
        <td style="border:none !important">
          Shirt &nbsp;(DC Dry Clean)
        </td>
        <td style="border:none !important">
          2 </td>
        <td style="border:none !important">
          100 </td>
      </tr>


      <tr>
        <td style="border:none !important">
          2 </td>
        <td style="border:none !important">
          Saree &nbsp;(RP ROll Polish)
        </td>
        <td style="border:none !important">
          2 </td>
        <td style="border:none !important">
          100 </td>
      </tr>


      <tr>
        <td colspan="2"><strong>Two Hundred Rupees Only</strong></td>
        <td><strong>Total:</strong></td>
        <td><strong>200</strong></td>
      </tr>

    </table>
  </center>
</body>

</html>

我只想删除第一行之后的水平线，即在 Sr、Item 和 all 之后，以及金额行之前（最后一行）。

Answer 1

只需删除内联样式（边框：none！重要；）并添加

上边框：none；底部边框：none；

Answer 2

试试这个

 .table-bordered>tbody>tr>th {
    border: 0px solid #ddd;
}

Answer 3

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <style>



 #chiru_inv>tbody tr:first-of-type td,
 #chiru_inv>tbody tr:nth-of-type(2) td{
    border: none;
 }

    #chiru_inv>tbody tr td:first-of-type{
    border-left: 1px solid #ddd;
    }

 #chiru_inv>tbody tr td:last-of-type{
    border-right: 1px solid #ddd;
 }

 #chiru_inv>tbody tr td{
  border-left: none;
  border-right: none;
 }


    @media print {
      table {
        border: 0 !important;
      }


   #chiru_inv tr td:first-of-type{
       border-left: 1px solid #ddd !important;
       }

    #chiru_inv tr td:last-of-type{
       border-right: 1px solid #ddd !important;
    }

  #chiru_inv tr:first-of-type td {
          border: 0 !important;
        }
        #chiru_inv tr:nth-of-type(2) td {
          border: 0 !important;
        }
        #chiru_inv tr:nth-of-type(3) td {
          border: 0 !important;
        }

   #chiru_inv>tbody tr td{
     border-left: none!important;
    border-right: none!important;
    }
    }
  </style>
</head>


<body>
  <center>
    <table id="chiru_inv" class="table table-striped table-hover table-bordered table-responsive">
      <tr>
        <td colspan="4" align="center">
          <h1>Company<br /><span style="font-size: 75%;">Number</span></h1>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <h3><span style="float: left;">Demo&nbsp;(2)</span></h3>
        </td>
        <td colspan="2">
          <h3><span style="float: right;">2017-11-16 12:18:15</span></h3>
        </td>
      </tr>
      <tr>
        <th>Sr.</th>
        <th>Item</th>
        <th>Qty</th>
        <th>Amount</th>
      </tr>

      <tr>
        <td>
          1 </td>
        <td>
          Shirt &nbsp;(DC Dry Clean)
        </td>
        <td>
          2 </td>
        <td>
          100 </td>
      </tr>


      <tr>
        <td>
          2 </td>
        <td>
          Saree &nbsp;(RP ROll Polish)
        </td>
        <td>
          2 </td>
        <td>
          100 </td>
      </tr>


      <tr>
        <td colspan="2"><strong>Two Hundred Rupees Only</strong></td>
        <td><strong>Total:</strong></td>
        <td><strong>200</strong></td>
      </tr>

    </table>
  </center>
</body>

</html>

从 Table 中仅删除水平边框

Remove only Horizontal Border from Table

html

css

html-table

border

twitter-bootstrap