Ralis Ralis - 1 month ago 9
HTML Question

HTML Table with 1 pixel border needed

I have below result (Run Code Snippet Button below), I don't need border around each cell separately I need a simple table like:

enter image description here



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

Use border-collapse: collapse

table {
    border-collapse: collapse;
}

The border-collapse property sets whether the table borders are collapsed into a single border or detached as in standard 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>