alt td:
tbody tr.alt td {
background: #e7edf6;
}
The previous code block styles the background of alternate rows in a light blue.
4. Define a table row hover state. The script also provides a hover state, making it
easy for users to highlight entire table rows by placing the mouse cursor over one
of the row??™s cells. This is styled using the rule shown in the following code block.
Note that both background and color settings are defined, which pretty much
reverse the standard colors (white on blue, rather than black on a light color). This
makes the highlighted row stand out more, and is the same device applications
tend to use. Also note that there are two selectors here. The first is for compliant
browsers, which apply :hover rules to more than just anchors. The second is a fallback
for older versions of Internet Explorer (before version 7), which didn??™t do this.
tbody tr:hover td, tbody tr.over td {
background: #5389d7;
color: #ffffff;
}
5. Remove some horizontal borders. With the stripes in place, the top and bottom
borders of table cells in the tbody area are now redundant. Therefore, remove
them by adding the following rule:
tbody td {
border-top: 0;
border-bottom: 0;
}
Your table should now look like the following image.
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
252
Adding separator stripes with PHP
If you??™re creating a table from data stored in a database, automating separator stripes is a
relatively simple process.
Pages:
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350