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:

Plain Table

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.

A Row color changes on mouse over

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:

Zebra Stripping Row

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.

Specific column text alignment

That it's for now.

Thanks

CSS3 Styling Table with Pseudoclasses: Part I

CSS3 Styling Table with Pseudoclasses is new feature in CSS 3 that make your style more advanced and programmable.

Change a row background color on mouse over

Zebra Stripping Table Rows

Text Alignment on specific columns

CSS3 Styling Table with Pseudoclasses: Part I

CSS3 Styling Table with Pseudoclasses is new feature in CSS 3 that make your style more advanced and programmable.

Change a row background color on mouse over

Zebra Stripping Table Rows

Text Alignment on specific columns

Related Articles