从表格中仅删除水平边框答案

【问题标题】：Remove only Horizontal Border from Table从表格中仅删除水平边框
【发布时间】：2018-04-29 15:44:10
【问题描述】：

我只想删除水平线。

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

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

我试过了：

<!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 之后，以及在金额行（最后一行）之前。

【问题讨论】：

标签： html css twitter-bootstrap html-table border

【解决方案1】：

只需删除内联样式 (border:none!important;) 并添加

边框顶部：无；边框底部：无；

【讨论】：

【解决方案2】：

试试这个

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

【讨论】：

【解决方案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>

【讨论】：