Как исправить заголовки моей таблицы, чтобы они не прокручивались - PullRequest
Новая
       40

Как исправить заголовки моей таблицы, чтобы они не прокручивались

0 голосов
/ 06 апреля 2019

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

Я искал некоторые старые SO-потоки, чтобы попытаться найти решение для исправления заголовка таблицы.прокручиваемый стол.Я довольно новичок в начальной загрузке и 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), который должен быть зафиксирован на месте.Фактические результаты состоят в том, что они прокручиваются вместе с таблицей.

Ответы [ 2 ]

0 голосов
/ 06 апреля 2019

Вы хотите 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
}
0 голосов
/ 06 апреля 2019

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

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