html - 表格行旁边的 float 元素

Question

当我将鼠标悬停在表格行上时，我试图在表格行旁边显示两个图标，这将是典型的编辑/删除等按钮。

我试过用图标添加一个额外的列并用相对和绝对定位它，但它会弄乱它后面第一列的样式

<td class="actions">
    <i *ngIf="editing" (click)="saveEdit()" class="fa fa-floppy-o" aria-hidden="true"></i>
    <i *ngIf="editing" (click)="cancelEdit()" class="fa fa-times" aria-hidden="true"></i>
</td>

.actions {
     position: relative;
     right: 5%;
     padding: 0;
     border: 0;
     vertical-align: middle;
}

这是我将鼠标悬停在一行上时想要做的

$background: #22304b;
$textColor: #58595b;
$lightBlue: #00b9cd;
$lightBlueDark: #0193a2;
$borderGrey: rgb(219, 219, 219);
$backgroundGrey: rgb(246, 246, 249);
table {
  border-radius: 4px;
  border: 1px solid $borderGrey;
  margin-bottom: 0;
  
  .header {
    background: $backgroundGrey;
    color: $background;
    padding: 25px 15px 15px;
    border-top: 1px solid $borderGrey;
    border-bottom: 0;
    text-align: center;
    font-size: 20px;
  }
  .header:last-of-type {
    border-right: 1px solid $borderGrey;
  }
  tr.row {
    transition: background 0.3s ease;
    padding: 15px;
    .column {
      border-right: 1px solid $borderGrey;
      border-top: 0;
      vertical-align: middle;
      font-size: 20px;
    }
    .column.checkbox,
    .column.centered {
      text-align: center;
    }
    .column:last-child {
      border-right: 0;
    }
  }
  tr.row:nth-child(even) {
    background: $backgroundGrey;
  }
  tr.row:hover {
    background: rgba($borderGrey, 0.7);
  }
}

#wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

<div id="wrapper">
  <table class="table">
    <thead>
      <tr>
        <th class="header">Company</th>
        <th class="header">Role</th>
        <th class="header rate">Start Date</th>
        <th class="header">End Date</th>
        <th class="header rate">Pay Rate</th>
        <th class="header rate">Charge Rate</th>
        <th class="header rate">Holiday Rate</th>
        <th class="header rate">Cost Code</th>
        <th class="header">Supervisor</th>
        <th class="header">Supervisor Email</th>
      </tr>
    </thead>
    <tbody>
      <tr class="row">
        <td class="column centered"> name </td>
        <td class="column centered">title</td>
        <td class="column centered">date</td>
        <td class="column centered">date2</td>
        <td class="column centered">10€</td>
        <td class="column centered">10€</td>
        <td class="column centered">10%</td>
        <td class="column centered">blabla</td>
        <td class="column centered">approver</td>
        <td class="column centered">email@email.com</td>
      </tr>
      <tr class="row">
        <td class="column centered"> name </td>
        <td class="column centered">title</td>
        <td class="column centered">date</td>
        <td class="column centered">date2</td>
        <td class="column centered">10€</td>
        <td class="column centered">10€</td>
        <td class="column centered">10%</td>
        <td class="column centered">blabla</td>
        <td class="column centered">approver</td>
        <td class="column centered">email@email.com</td>
      </tr>
      <tr class="row">
        <td class="column centered"> name </td>
        <td class="column centered">title</td>
        <td class="column centered">date</td>
        <td class="column centered">date2</td>
        <td class="column centered">10€</td>
        <td class="column centered">10€</td>
        <td class="column centered">10%</td>
        <td class="column centered">blabla</td>
        <td class="column centered">approver</td>
        <td class="column centered">email@email.com</td>
      </tr>
    </tbody>
  </table>
</div>

This is what I currently have (Codepen)

谢谢!

Answer 1

您可以添加一个额外的、绝对定位的元素，每个第一个 inside 图标 td(我给它一个名为 .edicons 的类)并使用以下 CSS。这使得它在默认情况下不可见，并且在悬停行时可见(行的左侧)。

td:first-child {
    position: relative;
}
.editicons {
  position: absolute;
  display: none;
  color: red;
  width: 60px;
  left: -50px;
}
tr:hover .editicons {
  display: block;
}

http://codepen.io/anon/pen/peryea