Welcome Login

Table: highlight selected row using css


Eg:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>

<style>
tr:hover {
/* background-color: #FF0000 */
background: #FCF;
}
</style>

</head>

<body>
  <table border="1">
    <tr>
      <td>cell 1</td>
      <td>cell 2</td>
      <td>cell 3</td>
    </tr>
    <tr>
      <td>cell 1</td>
      <td>cell 2</td>
      <td>cell 3</td>
    </tr>
    <tr>
      <td>cell 1</td>
      <td>cell 2</td>
      <td>cell 3</td>
    </tr>
    <tr>
      <td>cell 1</td>
      <td>cell 2</td>
      <td>cell 3</td>
    </tr>
  </table>
</body> 

</html>

 

 

Outputs:

css-tablerowhighlight1

 

 

You can use other css properties to highlight row, eg: font-weight:bold; color: #FF000;

 

 

 

For more information, see here.


Created on: Wednesday, November 27, 2013 by Andrew Sin