Diagonal Background Visible

pdugas

http://live.datatables.net/hukotola/1/edit

The list of script/style tags is from the Download Builder. I'm getting the diagonal-lines background for alternate rows at the start in that setup. If I add table-striped to the <table> tag's class attribute, I get proper row backgrounds but when I narrow the table, the responsive logic adds the row details controls and when I click one, I'm back to getting the diagonal-stripe background in some rows.

Odd...

allan

Looks like a problem with the Bootstrap integration. Bootstrap uses

.table-striped>tbody>tr:nth-of-type(odd) {
  ...
}

to style the striped rows.

Without table-striped Scroller uses:

div.DTS tbody tr.even {
    background-color: white;
}

It looks like the correct thing to do is to drop that .even selector: http://live.datatables.net/hukotola/3/edit .

What do you think?

Allan

pdugas

The :hover state brings the diagonals back when details are expanded still. Remove the table-striped and similar issues still happen.

allan

Good point. I'll look into that when I commit the change. It will just be a :hover pseudo class that is needed.

Allan

pdugas

I find that I can get the diagonals to appear to the right some times when resizing the container the table is within. See attached image.

pdugas

Here's the same with the cursor hovering over an expanded row.

pdugas

I'd also add that I disagree with the expanded child row being colored as a next row rather than as the parent above it. If the parent is .even, I would expect the child to be .even as well. Not sure that's something that can be fixed easily though given that the child appears to be added as an actual <tr/> in the current implementation.