Можно задать таблице скролл?

111

25 ноября 2020, 22:10

Скажите пожалуйста можно таблице задать скролл и если да то как ?
Как можно сделать чтобы при клике иконки справа (серые) меняли цвет ?
Как можно сделать чтобы при клике показать все таблица дальше раскрывалась ?

Answer 1

Создаем обертку .table-container со следующими стилями

.table-container{ max-height: 300px; overflow-y: auto; }

Для примера использован иконочный шрифт FontAwesome (Для первого ряда добавлены иконки)
При клике на кнопку добавляем новый класс контейнеру таблицы

Пример

let btn = document.querySelector('.btn'); 
let tableContainer = document.querySelector('.table-container'); 
btn.addEventListener('click', function(){ 
  tableContainer.classList.add('show'); 
  this.classList.add('hide'); 
});

*{ 
  box-sizing: border-box; 
} 
 
.block{ 
  padding: 20px; 
} 
 
.table-container{ 
  max-height: 300px; 
  overflow-y: auto; 
} 
.table-container.show{ 
  max-height: 100%; 
} 
 
table{ 
  width: 100%; 
  border: 1px solid #ccc;   
} 
td{ 
  padding: 5px; 
} 
tr:nth-of-type(even){ 
  background: #f7f7f7; 
} 
 
.btn{ 
  display: block; 
  width: 300px; 
  padding: 10px; 
  margin: 15px auto; 
} 
.btn.hide{ 
  display: none; 
} 
 
[class*=fa-]:hover{ 
  color: #f00; 
}

<link href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" rel="stylesheet"/> 
<div class="block"> 
  <div class="table-container"> 
    <table> 
      <tr> 
        <td>td</td> 
        <td><i class="fas fa-bell"></i></td> 
        <td><i class="fas fa-bell"></i></td> 
        <td><i class="fas fa-bell"></i></td> 
      </tr> 
      <tr> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
      </tr> 
      <tr> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
      </tr> 
      <tr> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
      </tr> 
      <tr> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
      </tr> 
      <tr> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
      </tr> 
      <tr> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
      </tr> 
      <tr> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
      </tr> 
      <tr> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
      </tr> 
      <tr> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
      </tr> 
      <tr> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
      </tr> 
      <tr> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
      </tr> 
      <tr> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
      </tr> 
      <tr> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
      </tr> 
      <tr> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
      </tr> 
      <tr> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
      </tr> 
      <tr> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
      </tr> 
      <tr> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
      </tr> 
      <tr> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
      </tr> 
      <tr> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
      </tr> 
      <tr> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
      </tr> 
      <tr> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
      </tr> 
      <tr> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
      </tr> 
      <tr> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
      </tr> 
      <tr> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
      </tr> 
      <tr> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
      </tr> 
      <tr> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
      </tr> 
      <tr> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
      </tr> 
      <tr> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
      </tr> 
      <tr> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
      </tr> 
      <tr> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
      </tr> 
      <tr> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
      </tr> 
      <tr> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
      </tr> 
      <tr> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
      </tr> 
      <tr> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
      </tr> 
      <tr> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
      </tr> 
      <tr> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
      </tr> 
      <tr> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
      </tr> 
      <tr> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
      </tr> 
      <tr> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
        <td>td</td> 
      </tr> 
    </table> 
  </div> 
   
  <button class="btn">Show all</button> 
   
</div>