Highlight one row in table in HTML and CSS
Description
The following code shows how to highlight one row in table.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.myTable {<!--from w w w . j a va2s . c o m-->
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
.myTable thead th {
background-color: #DDEFEF;
border: solid 1px #DDEEEE;
color: #336B6B;
padding: 10px;
text-align: left;
text-shadow: 1px 1px 1px #fff;
}
.myTable tbody td {
border: solid 1px #DDEEEE;
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
}
.myTable-row-highlight {
background-color: #CCE7E7;
}
.myTable-vertical tbody td {
border-top: none;
border-bottom: none;
}
</style>
</head>
<body>
<table class="myTable myTable-vertical">
<colgroup>
<col class="myTable-col-odd"></col>
<col class="myTable-col-even"></col>
<col class="myTable-col-odd"></col>
<col class="myTable-col-even"></col>
<col class="myTable-col-odd"></col>
</colgroup>
<thead>
<tr>
<th scope="col">Header 1</th>
<th scope="col">Header 2</th>
<th scope="col">Header 3</th>
<th scope="col">Header 4</th>
<th scope="col">Header 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
</tr>
<tr class="myTable-row-highlight">
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
</tr>
</tbody>
</table>
</body>
</html>
The code above generates the following result.