html - 从表格中仅删除水平边框

我只想删除水平线。

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

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

我试过:

<!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 之后，以及在 amount 行之前(最后一行)。

最佳答案

只需删除内联样式(边框:无!重要；)并添加

边框顶部:无；边框底部:无；

关于html - 从表格中仅删除水平边框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47323969/

html - 从表格中仅删除水平边框

上一篇：CSS:-ms-filter 在 Angular 4 中无法在 IE 上运行

下一篇：html - 将DIV放置在窗体的右侧