915300 - Alternating colors in tables is not preserved when sorted

Status: RESOLVED INCOMPLETE

(bugzilla.mozilla.org :: User Interface, defect)

Description

[Matt Basta [:basta]]

Tables have alternating colors for rows. However, when the tables are sorted (by clicking the column headers), the row colors stay associated with the original row rather than the position in the list.

I.e.: before sorting, the rows are ordered light, dark, light, dark, etc. After sorting, the rows have a random light/dark order.

The easy fix is to simply re-assign row colors after sorting a column. The proper fix is to use nth-child(even) and nth-child(odd) to stripe the rows in the CSS.

Comment 1

[:glob ✱]

ahhh, sorttable.js

Comment 2

[Matt Basta [:basta]]

A quick look at the CSS shows that you can replace the selectors for .bz_row_odd and .bz_row_even with the following:

.bz_bugitem:nth-child(even)
.bz_bugitem:nth-child(odd)

Note that if you do this, the specificity on some of the other styles (like .bz_enhancement) will need to be adjusted (i.e.: to .bz_bugitem.bz_enhancement). A quick test in Chrome's live edit shows that this should work great.

Comment 3

[Kohei Yoshino [:kohei]]

We don’t have zebra tables anymore with the new skin.