In the table I have, the first column spans over two rows while the following columns are split into two separate rows.
For this table, I need multiple instances of these "doubled rows", which is not a problem so far.
To style it with a zebra pattern, I use the following CSS code in react/glamorous format:
const StripedTable = glamorous(Table)({
'& th, & td': {
padding: '4px',
},
'& tfoot tr': {
background: '#DDDDDD',
},
'@media screen': {
['& > tbody:nth-of-type(even), ' +
'& > tbody:only-of-type > tr:nth-of-type(even)']: {
backgroundColor: '#EEEEEE',
},
['& > tbody:not(:only-of-type):hover, ' +
'& > tbody:only-of-type > tr:hover']: {
background: '#DDDDDD',
},
},
},
({doubleRow}) => {
if (doubleRow) {
return {
'@media screen': {
// overwrite standard striped coloring that is used for "normal" table rows
['& > tbody:nth-of-type(even), ' +
'& > tbody:only-of-type > tr:nth-of-type(even)']: {
background: '#FFFFFF',
},
// Think in groups of 4 and color every two rows identical
['& > tbody:nth-of-type(even), ' +
'& > tbody:only-of-type > tr:nth-of-type(4n), ' +
'& > tbody:only-of-type > tr:nth-of-type(4n-1)']: {
background: '#EEEEEE',
},
['& > tbody:not(:only-of-type):hover, ' +
'& > tbody:only-of-type > tr:hover,' +
'& > tbody:only-of-type > tr:hover + tr']: {
background: '#DDDDDD',
},
// FIXME hovering groups don't fit when mouse over even rows
['& > tbody:only-of-type > tr:nth-of-type(even):hover,' +
// the following does not work of course, but it should show
// what is intended. "- tr" can't work, as html works from top to
// bottom only
'& > tbody:only-of-type > tr:nth-of-type(even):hover - tr']: {
background: '#DDDDDD',
},
},
};
}
}
);
The problem I am facing can be better explained through the comments. How do I select, for example, the second row that I hover over together with the previous one? Inserting a tbody around every two rows and selecting it is not an option.
EDIT: Here is the HTML structure of one of the rows in JSX. Note that the DOMs are styled differently and have their own component, but their purpose is the same as tr and td:
<TableRow>
<TableData rowSpan="2">
{'Title of Row'}
</TableData>
<TableData>
{data1}
</TableData>
<TableData>
{data2}
</TableData>
<TableData>
{data3}
</TableData>
<TableData>
{data4}
</TableData>
</TableRow>
<TableRow>
<TableData colSpan="4">
{veryLongText}
</TableData>
</TableRow>