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>

Answer 1

只有桌边框：

border: 1px solid black;

没有空格（用于表格）：

border-collapse: collapse;

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>

Answer 3

使用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>

Answer 4

table {
    border-collapse: collapse;
}

Answer 5

尝试以下代码。

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 3px dotted#ddd;
text-align: left;
}

 table {
border-collapse: collapse;
width: 100%;
 }

th, td {
padding: 15px;
}
</style>
  </head>
  <body>

    <h2>The padding Property</h2>
    <p>This property adds space between the border and the content in a table. </p>

 <table>
 <tr>
  <th>Firstname</th>
  <th>Lastname</th>
  <th>Savings</th>
 </tr>
 <tr>
<td>firstname1</td>
<td>lastname1</td>
<td>$100</td>
</tr>
<tr>
   <td>Lois</td>
   <td>Griffin</td>
   <td>$150</td>
</tr>
<tr>
   <td>firstname2</td>
   <td>lastname2</td>
   <td>$300</td>
 </tr>
  <tr>
      <td>firstname3</td>
      <td>lastname3</td>
      <td>$250</td>
 </tr>
 </table>

   </body>
   </html>

需要1个像素边框的HTML表格

5 个答案: