需要 1 像素边框的 HTML 表格

Question

我有以下结果（下面的 运行代码片段 按钮），我不需要分别在每个单元格周围添加边框我需要一个简单的表格，例如：

  table td{
    border:1px solid #000000;
 }

 <table class="table table-bordered">
   <thead>
  <tr>
     <th>Sr No</th>
     <th>Product Name</th>
     <th>Quantity</th>
     <th>Add</th>
  </tr>
   </thead>
   <tbody class="allign-center">
  <tr>
     <td>1</td>
     <td class="proname">MARHABA SAFOOF TABKHIR</td>
     <td><input class="qty" type="number"></td>
     <td><button class="btn btn-xs btn-success" onclick=""><i class="fa fa-arrow-right"></i>Add</button></td>
  </tr>
  <tr>
     <td>2</td>
     <td class="proname">MARHABA JAWARISH SHAHI AMBRI</td>
     <td><input class="qty" type="number"></td>
     <td><button class="btn btn-xs btn-success" onclick=""><i class="fa fa-arrow-right"></i>Add</button></td>
  </tr>
  <tr>
     <td>3</td>
     <td class="proname">MARHABA JAWARISH ZAROONI SADA</td>
     <td><input class="qty" type="number"></td>
     <td><button class="btn btn-xs btn-success" onclick=""><i class="fa fa-arrow-right"></i>Add</button></td>
  </tr>
  <tr>
     <td>4</td>
     <td class="proname">MARHABA SAFOOF HAZAM</td>
     <td><input class="qty" type="number"></td>
     <td><button class="btn btn-xs btn-success" onclick=""><i class="fa fa-arrow-right"></i>Add</button></td>
  </tr>
   </tbody>
</table>

原文由 Rizwan Ali Sabir 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 border-collapse: collapse

 table {
    border-collapse: collapse;
}

border-collapse 属性设置表格边框是折叠成单个边框还是像标准 HTML 中那样分离。

 table {
    border-collapse: collapse;
    border:1px solid #69899F;
}
table td{
    border:1px dotted #000000;
    padding:5px;
}
table td:first-child{
    border-left:0px solid #000000;
}
table th{
   border:2px solid #69899F;
   padding:5px;
}

 <table class="table table-bordered">
   <thead>
  <tr>
     <th>Sr No</th>
     <th>Product Name</th>
     <th>Quantity</th>
     <th>Add</th>
  </tr>
   </thead>
   <tbody class="allign-center">
  <tr>
     <td>1</td>
     <td class="proname">MARHABA SAFOOF TABKHIR</td>
     <td><input class="qty" type="number"></td>
     <td><button class="btn btn-xs btn-success" onclick=""><i class="fa fa-arrow-right"></i>Add</button></td>
  </tr>
  <tr>
     <td>2</td>
     <td class="proname">MARHABA JAWARISH SHAHI AMBRI</td>
     <td><input class="qty" type="number"></td>
     <td><button class="btn btn-xs btn-success" onclick=""><i class="fa fa-arrow-right"></i>Add</button></td>
  </tr>
  <tr>
     <td>3</td>
     <td class="proname">MARHABA JAWARISH ZAROONI SADA</td>
     <td><input class="qty" type="number"></td>
     <td><button class="btn btn-xs btn-success" onclick=""><i class="fa fa-arrow-right"></i>Add</button></td>
  </tr>
  <tr>
     <td>4</td>
     <td class="proname">MARHABA SAFOOF HAZAM</td>
     <td><input class="qty" type="number"></td>
     <td><button class="btn btn-xs btn-success" onclick=""><i class="fa fa-arrow-right"></i>Add</button></td>
  </tr>
   </tbody>
</table>

原文由 Mukesh Ram 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

也许这就是您要找的。试一试。

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

 <table class="table table-bordered">
   <thead>
  <tr>
     <th>Sr No</th>
     <th>Product Name</th>
     <th>Quantity</th>
     <th>Add</th>
  </tr>
   </thead>
   <tbody class="allign-center">
  <tr>
     <td>1</td>
     <td class="proname">MARHABA SAFOOF TABKHIR</td>
     <td><input class="qty" type="number"></td>
     <td><button class="btn btn-xs btn-success" onclick=""><i class="fa fa-arrow-right"></i>Add</button></td>
  </tr>
  <tr>
     <td>2</td>
     <td class="proname">MARHABA JAWARISH SHAHI AMBRI</td>
     <td><input class="qty" type="number"></td>
     <td><button class="btn btn-xs btn-success" onclick=""><i class="fa fa-arrow-right"></i>Add</button></td>
  </tr>
  <tr>
     <td>3</td>
     <td class="proname">MARHABA JAWARISH ZAROONI SADA</td>
     <td><input class="qty" type="number"></td>
     <td><button class="btn btn-xs btn-success" onclick=""><i class="fa fa-arrow-right"></i>Add</button></td>
  </tr>
  <tr>
     <td>4</td>
     <td class="proname">MARHABA SAFOOF HAZAM</td>
     <td><input class="qty" type="number"></td>
     <td><button class="btn btn-xs btn-success" onclick=""><i class="fa fa-arrow-right"></i>Add</button></td>
  </tr>
   </tbody>
</table>

原文由 claudios 发布，翻译遵循 CC BY-SA 3.0 许可协议