Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to define a class for table to control the style of table rows

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;

like image 375
newbie Avatar asked Jan 22 '14 19:01

newbie


People also ask

Can you style a table row?

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.

Which attribute is used to define table row?

The <tr> element defines a table row, the <th> element defines a table header, and the <td> element defines a table cell.

Which selector add the style to the first row of the table?

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.


2 Answers

You can achieve it like this:

.aTable {
    width: 800px;
    border-spacing: 2px;
}
.aTable tr {
    background-color: #DDD;
}
like image 97
dfsq Avatar answered Oct 07 '22 13:10

dfsq


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.

like image 31
mboldt Avatar answered Oct 07 '22 14:10

mboldt