CSS Table Styling

Last Updated: April 17, 2022

CSS style can be useed to style HTML tables

Table Border Style

You can use the border property to style the table

.table{
 border: 1px solid #ccc;
}
Invoice Number Issued Date Amout Status
000023 12-MAR-2022 $2340.00 Paid
000022 11-MAR-2022 $1200.00 Paid
000021 12-MAR-2022 $2390.00 Not Paid
.table_class{
  border: 1px solid #ccc;
  width:100%;
}
.table_class td, .table_class th {
  border: 1px solid #ccc;
  padding:2px 5px;
}
Invoice Number Issued Date Amout Status
000023 12-MAR-2022 $2340.00 Paid
000022 11-MAR-2022 $1200.00 Paid
000021 12-MAR-2022 $2390.00 Not Paid

How to select the even rows of the table

To select an even row, you can use the following CSS selector

.table_class tr:nth-child(even){
 background-color: #f2f2f2;
}
Invoice Number Issued Date Amout Status
000023 12-MAR-2022 $2340.00 Paid
000022 11-MAR-2022 $1200.00 Paid
000021 12-MAR-2022 $2390.00 Not Paid
Test