代码之家 › 专栏 › 技术社区 › rgoncalv

如何使表格行可单击,并通过将其置于前面来突出显示?

html-table twitter-bootstrap html5 css html

rgoncalv · 技术社区 · 8 年前

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

我在一些网站上看到了某种“带着阴影走到前面”或“3D效果”,感觉非常愉快。
鼠标光标应具有“手”图标,指示行可单击。

每当用户将鼠标悬停在表的行上时,我需要显示这些功能。我试过用引导程序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;
}

2 回复 | 直到 8 年前

Vishal 8 年前

请检查下面的小提琴。你的两项要求完成了。

我在一些网站上看到了某种“带着阴影走到前面”或“3D效果”,感觉非常愉快。
鼠标光标应具有“手”图标,指示行可单击。

Fiddle

.trow
{
   transition: transform .2s;
}

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

k1dev 8 年前

<tr> 有 .row 等级:

.row: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; //this is a box shadowing effect that you can tweak at your choice.
}

如果你还想做更多的“3D”效果,你可以玩 width 和 height 的属性 <TR & GT; 元素使其比其他元素更大 hover 事件。

当我使用3D效果时,我通常会 2D Transforms 使用翻译属性调整定位。