Buefy: заблокируйте заголовок таблицы и сделайте прокрутку только строк

Question

Buefy: заблокируйте заголовок таблицы и сделайте прокрутку только строк

Есть ли способ, которым я могу заблокировать / сделать заголовок палки компонента таблицы и позволить только строки прокручивать?

-1

javascript css vue.js buefy

Источник

user364314 26 янв '19 в 16:57

1 ответ

Другие вопросы по тегам javascript css vue.js buefy

user7023666 26 янв '19 в 17:44 2019-01-26 17:44 · Answer 1 · 2019-01-26 17:44

Один из способов, которым я обычно решаю эту проблему, - это использование Sticky Method, например:

Однако в этом есть ОСОБЕННОСТЬ: Sticky не поддерживается IE6-IE10. Проверьте поддержку здесь, чтобы узнать, если вы заинтересованы в использовании этого, в настоящее время я рассматриваю различные способы. введите описание ссылки здесь

table
{
  Position: relative;
  width: 100%;
  text-align: center;
}

thead, th
{
  background: black;
  color: white;
  border: none;
  margin: 0;
  padding: 0;
  position: sticky;
  top: 0;
}

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>State</th>
      <th>Employeed</th>
    </tr>
  </thead>
  
  <tr>
    <td>Sara</td>
    <td>FL</td>
    <td>No</td>
  </tr>
  <tr>
    <td>Sara</td>
    <td>FL</td>
    <td>No</td>
  </tr>
  <tr>
    <td>Sara</td>
    <td>FL</td>
    <td>No</td>
  </tr>
  <tr>
    <td>Sara</td>
    <td>FL</td>
    <td>No</td>
  </tr>
  <tr>
    <td>Sara</td>
    <td>FL</td>
    <td>No</td>
  </tr>
  <tr>
    <td>Sara</td>
    <td>FL</td>
    <td>No</td>
  </tr>
  <tr>
    <td>Sara</td>
    <td>FL</td>
    <td>No</td>
    <tr>
    <td>Sara</td>
    <td>FL</td>
    <td>No</td>
  </tr>
  <tr>
    <td>Sara</td>
    <td>FL</td>
    <td>No</td>
  </tr>
  <tr>
    <td>Sara</td>
    <td>FL</td>
    <td>No</td>
  </tr>
  <tr>
    <td>Sara</td>
    <td>FL</td>
    <td>No</td>
  </tr>
  <tr>
    <td>Sara</td>
    <td>FL</td>
    <td>No</td>
  </tr>
  <tr>
    <td>Sara</td>
    <td>FL</td>
    <td>No</td>
  </tr>
  <tr>
    <td>Sara</td>
    <td>FL</td>
    <td>No</td>
    <tr>
    <td>Sara</td>
    <td>FL</td>
    <td>No</td>
  </tr>
  <tr>
    <td>Sara</td>
    <td>FL</td>
    <td>No</td>
  </tr>
  <tr>
    <td>Sara</td>
    <td>FL</td>
    <td>No</td>
  </tr>
  <tr>
    <td>Sara</td>
    <td>FL</td>
    <td>No</td>
  </tr>
  <tr>
    <td>Sara</td>
    <td>FL</td>
    <td>No</td>
  </tr>
  <tr>
    <td>Sara</td>
    <td>FL</td>
    <td>No</td>
  </tr>
  <tr>
    <td>Sara</td>
    <td>FL</td>
    <td>No</td>
    <tr>
    <td>Sara</td>
    <td>FL</td>
    <td>No</td>
  </tr>
  <tr>
    <td>Sara</td>
    <td>FL</td>
    <td>No</td>
  </tr>
  <tr>
    <td>Sara</td>
    <td>FL</td>
    <td>No</td>
  </tr>
  <tr>
    <td>Sara</td>
    <td>FL</td>
    <td>No</td>
  </tr>
  <tr>
    <td>Sara</td>
    <td>FL</td>
    <td>No</td>
  </tr>
  <tr>
    <td>Sara</td>
    <td>FL</td>
    <td>No</td>
  </tr>
  <tr>
    <td>Sara</td>
    <td>FL</td>
    <td>No</td>
    <tr>
    <td>Sara</td>
    <td>FL</td>
    <td>No</td>
  </tr>
  <tr>
    <td>Sara</td>
    <td>FL</td>
    <td>No</td>
  </tr>
  <tr>
    <td>Sara</td>
    <td>FL</td>
    <td>No</td>
  </tr>
  <tr>
    <td>Sara</td>
    <td>FL</td>
    <td>No</td>
  </tr>
  <tr>
    <td>Sara</td>
    <td>FL</td>
    <td>No</td>
  </tr>
  <tr>
    <td>Sara</td>
    <td>FL</td>
    <td>No</td>
  </tr>
  <tr>
    <td>Sara</td>
    <td>FL</td>
    <td>No</td>
  </tr>
<table>