You can improve readability of data which is in table by changing the color of row when users mouse over it, to highlight the row they are reading. For example you can add the next additional CSS rule to the set of rules described in the article How to display spreadsheet data in an attractive and usable way with CSS:

C# 8.0 and .NET Core 3.0 – Modern Cross-Platform Development: Build applications with C#, .NET Core, Entity Framework Core, ASP.NET Core, and ML.NET using Visual Studio Code, 4th Edition
ASP.NET Core 3 and Angular 9: Full stack web development with .NET Core 3.1 and Angular 9, 3rd Edition
C# in Depth, 4th Edition

.datatable tr:hover {

background-color: #DFE7F2;

color: #000000;

}

In this case if you use the next test file, the result is shown in the picture:

File test.html

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

“https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns=”https://www.w3.org/1999/xhtml” lang=”en-US”>

<head>

<title>How to change a background color of a row from a table on hover with CSS</title>

<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />

<link rel=”stylesheet” type=”text/css” href=”test.css” />

</head>

<body>

<table class=”datatable” summary=”This table shows Apple Inc. Annual Data for years 2009 through 2012″>

<caption>Yearly Income Statements 2009 – 2012</caption>

<tr>

<th scope=”col”>In Millions of USD (except for per share items)</th>

<th scope=”col”>52 weeks ending 2012-09-29</th>

<th scope=”col”>52 weeks ending 2011-09-24</th>

<th scope=”col”>52 weeks ending 2010-09-25</th>

<th scope=”col”>52 weeks ending 2009-09-26</th>

</tr>

<tr>

<th scope=”row”>Revenue</th>

<td>156,508.00</td>

<td>108,249.00</td>

<td>65,225.00</td>

<td>42,905.00</td>

</tr>

<tr>

<th scope=”row”>Other Revenue, Total</th>

<td>-</td>

<td>-</td>

<td>-</td>

<td>-</td>

</tr>

<tr>

<th scope=”row”>Total Revenue</th>

<td>156,508.00</td>

<td>108,249.00</td>

<td>65,225.00</td>

<td>42,905.00</td>

</tr>

<tr>

<th scope=”row”>Cost of Revenue, Total</th>

<td>87,846.00</td>

<td>64,431.00</td>

<td>39,541.00</td>

<td>25,683.00</td>

</tr>

<tr>

<th scope=”row”>Gross Profit</th>

<td>68,662.00</td>

<td>43,818.00</td>

<td>25,684.00</td>

<td>17,222.00</td>

</tr>

<tr>

<th scope=”row”>Selling/General/Admin. Expenses, Total</th>

<td>10,040.00</td>

<td>7,599.00</td>

<td>5,517.00</td>

<td>4,149.00</td>

</tr>

<tr>

<th scope=”row”>Research & Development</th>

<td>3,381.00</td>

<td>2,429.00</td>

<td>1,782.00</td>

<td>1,333.00</td>

</tr>

<tr>

<th scope=”row”>Total Operating Expense</th>

<td>101,267.00</td>

<td>74,459.00</td>

<td>46,840.00</td>

<td>31,165.00</td>

</tr>

</table>

</body>

</html>

Changing of a background color of a row from a table on hover with CSS

Changing of a background color of a row from a table on hover with CSS