CSS3 Styling Table with Pseudoclasses by selecting an element in the more advanced way. For example, we select an element based on their event as select <a> element onmouseover event can using pseudoclasses a:hover. Let's create a simple example. First, we have to make an HTML file with a Table inside it.
<html>
<head><title>Conditional Statement</title></head>
<body>
<h1>CSS3 Pseudoclasses Example</h1>
<table>
<thead>
<tr>
<th>SKU</th>
<th>Product Name</th>
<th>Cost (USD)</th>
<th>Sell Price (USD)</th>
</tr>
</thead>
<tbody>
<tr>
<td>100001</td>
<td>Samsung Galaxy S7 Edge</td>
<td>670</td>
<td>780</td>
</tr>
<tr>
<td>100002</td>
<td>Huawei Nexus 6P</td>
<td>450</td>
<td>660</td>
</tr>
<tr>
<td>100003</td>
<td>LG Nexus 5x</td>
<td>380</td>
<td>520</td>
</tr>
<tr>
<td>100004</td>
<td>Apple iPhone 7</td>
<td>780</td>
<td>1100</td>
</tr>
<tr>
<td>100005</td>
<td>Apple iPhone 6 SE</td>
<td>300</td>
<td>420</td>
</tr>
</tbody>
</table>
</body>
</html>
Above code just plain table without any styling. And it looks like this in a browser:
Change a row background color on mouse over
To make a row background color changes when mouse over it, we will use ":hover" pseudoclass. This CSS style also makes our table nice look than before.
<style>
table {
width: 600px;
border-collapse: collapse;
border: solid 2px #bbb;
}
table tr td, table tr th {
padding: 5px;
border: solid 1px #eee;
}
table tr th {
border-bottom: solid 2px #bbb;
}
table tbody tr:hover {
background-color: yellow;
}
</style>And now when your mouse over a table row, color will changes.
Zebra Stripping Table Rows
Now we are making table rows looks like zebra stripping, different background colors on each even and odd row. This done using nth-of-type(event) and nth-of-type(odd).
table tbody tr:nth-of-type(even){
background-color: #F3F3F3;
}
table tbody tr:nth-of-type(odd) {
background-color:#ddd;
}Here are the results:
Text Alignment on specific columns
For making specific columns has different text alignment, we are using pseudoclass nth-child(column) for the specific column where (column) is column position by number. And also we are using last-child pseudoclass for the last column. In this example, we will make cost and sell price text alignment in right.
table tbody td:last-child, table tbody td:nth-child(3) {
text-align: right;
}Now, columns of cost and sell price alignment to right.
That it's for now.
Thanks
