Question

我正在尝试使用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>

而不是保持静止，悬停行下方的行的边框和内容向下移动，在行未被徘徊之后保持向下移动，但在悬停后第二次悬停后向上移动。

Answer 1

我会使用CSS轮廓而不是边框/填充组合，以防止行像fork of your Fiddle一样移动。

outline: 2px solid black;

属性：悬停表行不会恢复到其前：悬停状态

1 个答案: