テーブル行の隣に浮動要素がある

Question

テーブル行の横に2つのアイコンを表示しようとしていますが、これは一般的な編集/削除ボタンです。

私はアイコンで余分な列を追加すると、相対と絶対の両方でそれを配置しようとしましたが、それはそれ

<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

あなたはの内側にそれぞれ最初のtdをアイコンで追加、絶対位置要素を追加します（私はクラスが.editiconsと呼ばれることになった）と、次の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