HTML Table With 1 Pixel Border Needed

August 20, 2022 Post a Comment

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

Solution 1:

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>

Solution 2:

Maybe this is what you're looking for. Give it a shot.

 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>

Solution 3:

Only table border around:

Baca Juga

border: 1px solid black;

Without space (use for table):

border-collapse: collapse;

Solution 4:

table {
    border-collapse: collapse;
}

Solution 5:

Try below code.

<!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>

Free Interactive Html5 Tutorial