I have below result (Run Code Snippet Button below), I don't need border around each cell separately I need a simple table like:
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>
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>
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With