I'm wondering if I can define a class that could also control the row styles within the table.
Lets say I define a class "aTable"
.aTable
{
width:800px;
border-spacing:2px;
}
I also want to define the row styles. So when I assign this class to a table, all the rows in that table would follow the design, let say background-color:#e9e9e9;
As is the case with all parts of a table, you can change the appearance of a table row and its contents using CSS. Any styles applied to the <tr> element will affect the cells within the row unless overridden by styles applied to those cells.
The <tr> element defines a table row, the <th> element defines a table header, and the <td> element defines a table cell.
The ::first-line selector is used to add a style to the first line of the specified selector. Note: The following properties can be used with ::first-line: font properties.
You can achieve it like this:
.aTable {
width: 800px;
border-spacing: 2px;
}
.aTable tr {
background-color: #DDD;
}
To give a whole row a background-color your would assign the background-color to each cell in that row, i.e.
.aTable tr td { background-color: #e9e9e9: }
You can always select specific classes or elements within a css class definition like that.
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