Html Table With 1 Pixel Border Needed

September 16, 2024 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;
} 
tabletd{
    border:1px dotted #000000;
    padding:5px;
}
tabletd:first-child{
    border-left:0px solid #000000;
}
tableth{
   border:2px solid #69899F;
   padding:5px;
}

<tableclass="table table-bordered"><thead><tr><th>Sr No</th><th>Product Name</th><th>Quantity</th><th>Add</th></tr></thead><tbodyclass="allign-center"><tr><td>1</td><tdclass="proname">MARHABA SAFOOF TABKHIR</td><td><inputclass="qty"type="number"></td><td><buttonclass="btn btn-xs btn-success"onclick=""><iclass="fa fa-arrow-right"></i>Add</button></td></tr><tr><td>2</td><tdclass="proname">MARHABA JAWARISH SHAHI AMBRI</td><td><inputclass="qty"type="number"></td><td><buttonclass="btn btn-xs btn-success"onclick=""><iclass="fa fa-arrow-right"></i>Add</button></td></tr><tr><td>3</td><tdclass="proname">MARHABA JAWARISH ZAROONI SADA</td><td><inputclass="qty"type="number"></td><td><buttonclass="btn btn-xs btn-success"onclick=""><iclass="fa fa-arrow-right"></i>Add</button></td></tr><tr><td>4</td><tdclass="proname">MARHABA SAFOOF HAZAM</td><td><inputclass="qty"type="number"></td><td><buttonclass="btn btn-xs btn-success"onclick=""><iclass="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;
}

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

Solution 3:

Only table border around:

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>

Html5 Developer