Как сделать строку таблицы кликабельной и выделить ее визуально? - PullRequest
Новая
       13

Как сделать строку таблицы кликабельной и выделить ее визуально?

0 голосов
/ 27 мая 2018

Я пытаюсь создать таблицу со следующими двумя функциями:

  1. Какой-то «выведение на передний план с тенью» или «эффект 3d», который я вижу в некоторыхвеб-сайты и найти очень приятные.

  2. Курсор мыши должен иметь значок "рука", указывающий, что строка активна.

Мне нужны эти функции, чтобыпоявляются всякий раз, когда пользователь наводит курсор на строки таблицы.Я попытался использовать функциональность класса table-hover в Bootstrap 4, но не смог реализовать ни одну из этих двух функций.

Для первой функциональности у меня есть идея добавить класс с тенью к <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 ]

0 голосов
/ 28 мая 2018

Пожалуйста, проверьте ниже Fiddle.Ваши два требования выполнены.

  1. Какой-то «выведение на передний план с тенью» или «3d-эффект», который я вижу на некоторых веб-сайтах и ​​нахожу очень приятным.
  2. Курсор мышидолжен иметь значок «рука», указывающий, что строка кликабельна.

Fiddle 

.trow
{
   transition: transform .2s;
}

.trow:hover {
   cursor:pointer; 
   transform: scale(1.03);
   background:#ccc;
   color:#fff;
}
0 голосов
/ 27 мая 2018

В CSS, если у вашего <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> для увеличения его по сравнению с другими при событии hover.

Когда я привык играть с 3D-эффектами, я обычно применял 2D-преобразования для настройки позиционирования с переводомсвойства.

...