Блог

Я пытаюсь исправить заголовок моей таблицы так, чтобы он не прокручивался, а оставался зафиксированным на месте.

Я просмотрел несколько старых потоков SO, чтобы попытаться найти решение для исправления заголовка прокручиваемой таблицы. Я довольно новичок в bootstrap и React, и я считаю, что я близок к этому. Я задаю этот вопрос здесь, чтобы найти ответ, специфичный для моего кода.

моя таблица в компоненте react

     <div>
      <div className="tablediv">
      <div className="table-wrapper-scroll-y my-custom-scrollbar">
        <table className="table table-hover table-striped table-light">
          <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">Date</th>
            <th scope="col">Value: USD</th>
          </tr>
        </thead>
        <tbody>
          {priceAndDateArray.slice(0).reverse().map((item, i) => (
              <tr key={i}>
                <th scope="row">{i 1}</th>
                <td>{item.date}</td>
                <td>{item.price}</td>
              </tr>
          ))}
        </tbody>
      </table>
      </div>
      </div>
    </div>
  

мой css, относящийся к таблице

 .tablediv {
  flex-wrap: wrap;
  align-content: space-evenly;
  padding: 5%;
  justify-content: center
}

.tablediv tr {
  cursor: pointer;
  cursor: hand;
}

.my-custom-scrollbar {
  position: relative;
  height: 400px;
  overflow: auto;
}
.table-wrapper-scroll-y {
  display: block;
}
  

Ожидаемый результат — это то, что верхний заголовок таблицы (#, дата, значение: USD) будет исправлен на месте. Фактические результаты заключаются в том, что они прокручиваются вместе с таблицей.

Попробуйте добавить это.

 .tablediv {
    flex-wrap: wrap;
    align-content: space-evenly;
    padding: 5%;
    justify-content: center;
    position: fixed;
    top: 0;
}
  

вы хотите, css position:sticky чтобы заголовок сохранялся до тех пор, пока содержимое не будет прокручиваться мимо. Вот информация и примеры

Грубо говоря, ваш css будет выглядеть следующим образом

 thead {
 position: sticky;
 top:0; //or whatever offset you want
 z-index: 100; // make sure it stacks higher than other stuff on the page
}