css - 如何使表格行可点击并通过在视觉上将其置于最前面来突出显示它？

Question

我正在尝试创建一个具有以下两个功能的表:

1. 我在某些网站上看到的某种“带有阴影的前置”或“3d 效果”，我觉得非常愉快。

2. 鼠标光标应带有“手形”图标，表示该行可点击。

只要用户将鼠标悬停在表格的行上，我就需要这些功能出现。我尝试使用 Bootstrap 4 的 table-hover类的功能，但无法实现这两个功能中的任何一个。

对于第一个功能，我想在 <tr> 中添加一个带影子的类被盘旋。但是，不知道这是否是最好的方法。 是否有一些已经定义的类可以实现这种行为？

对于第二个功能，我不知道。有什么建议吗？

这是我的代码:

<div class="container">
<div class="table-wrapper">
  <table class="table">
    <thead id="thead_st" class="thead">
      <tr>
        <th class="thead-row" scope="col"></th>
        <th class="thead-row" scope="col">1</th>
        <th class="thead-row" scope="col">2</th>
        <th class="thead-row" scope="col">3</th>
        <th class="thead-row" scope="col">4</th>
        <th class="thead-row" scope="col"></th>
      </tr>
    </thead>
    <tbody>
      <tr class="trow">
        <th scope="row"></th>
        <td class="score">4.7</td>
        <td>Bla bla</td>
        <td>2</td>
      </tr>
    </tbody>
  </table>
</div>
</div>

CSS:

.table-wrapper {
  border-radius: 8px;
  overflow: hidden;
}

.container {
   margin-top: 50px;
   margin-bottom: 50px;
   background: white;
   border-radius: 8px;
   padding: 0px;
}

body {
   background: #ECEEF1;
   font-family: 'Roboto', sans-serif;
   color: #2C3A56;
}

tr {
  font-size: 16.5px;
  line-height: 50px;
  padding: 0px;
  font-weight: 100;
}

td, th {
  display: table-cell;
  text-align: center;
}

#thead_st {
  background-color: #F6CE52;
  border: 3px solid #F6CE52;
  color: white;
}

.thead-row {
    line-height: 20px;
    font-weight: 100;
}


.trow:hover {
   cursor:pointer; //set the cursor to pointer (hand)
   background-color: blue; //sets hovered row's background color to blue
   box-shadow: 5px 10px #888888;
}

Answer 1

请检查 fiddle 下方。您的两个要求已完成。

1. 我在某些网站上看到的某种“带有阴影的前置”或“3d 效果”，我觉得非常愉快。
2. 鼠标光标应带有“手”图标，表示该行是可点击的。

Fiddle

.trow
{
   transition: transform .2s;
}

.trow:hover {
   cursor:pointer; 
   transform: scale(1.03);
   background:#ccc;
   color:#fff;
}