我正在尝试使用2px边框突出显示表格的行。为了防止细胞移位,如果没有选择并且没有悬停,则给予4px填充,如果悬停则为2px边框和2px填充,如果选择则为4px边框。
代码可在此JS Fiddle中找到或粘贴在下方。
td {
padding: 6px 10px;
text-align: center;
border-bottom: 1px solid #E1E1E1;
font-size: 1.3rem; }
table {
border-collapse: collapse;
}
tr {
padding: 4px;
}
tr.selected {
border: 4px solid black; }
tr.selected td:first-child {
padding-left : 8px; }
tr.selected td:last-child {
padding-right : 8px; }
tr.notselected {
border: 0px solid black;
padding: 4px;}
tr.notselected:hover td:first-child {
padding-left : 9px; }
tr.notselected:hover td:last-child {
padding-right : 9px; }
tr.notselected:hover {
border: 2px solid black;
padding: 2px; }
<table>
<tr>
<td></td>
<td colspan="2">Header 1</td>
<td colspan="2">Header 2</td>
</tr>
<tr>
<td></td>
<td>Subheader 1.1</td>
<td>Subheader 1.2</td>
<td>Subheader 2.1</td>
<td>Subheader 2.2</td>
</tr>
<tr class="selected">
<td>Row 1</td>
<td >10.1</td>
<td >10.6</td>
<td >9.1</td>
<td >9.4</td>
</tr>
<tr class="notselected">
<td>Row 2</td>
<td>12.9</td>
<td>11.3</td>
<td>10.1</td>
<td>10.5</td>
</tr>
<tr class="notselected">
<td>Row 3</td>
<td></td>
<td></td>
<td>8.7</td>
<td>8.8</td>
</tr>
<tr class="notselected">
</table>
而不是保持静止,悬停行下方的行的边框和内容向下移动,在行未被徘徊之后保持向下移动,但在悬停后第二次悬停后向上移动。