html`<style>
table.data {
padding: 50px 0;
overflow: hidden;
z-index: 1;
}
table.data thead th {
font-weight: 100;
padding-left: 5px;
}
table.data thead th+th {
text-align: center;
padding: 0 10px;
}
table.data tbody td {
cursor: pointer;
}
table.data tbody td a {
padding-left: 5px;
}
/* td+td means all but the first column */
table.data tbody td+td {
text-align: center;
}
table.data tr:hover td {
}
table.data td, table.data th {
position: relative;
}
/*
A hack to do the hover selection bars. It requires the "position:relative"
on the cells above, as well as the table's "overflow: hidden and z-index: 1".
But once you have that, it works.
*/
table.data td+td:hover::before {
background-color: #ffd;
content: '\\0000a0';
height: 100%;
left: -5000px;
position: absolute;
top: 0;
width: 10000px;
z-index: -1;
}
table.data td+td:hover::after {
background-color: #ffd;
content: '\\0000a0';
height: 10000px;
left: 0;
position: absolute;
top: -5000px;
width: 100%;
z-index: -1;
}
</style>
`