Breaking News: Grepper is joining You.com. Read the official announcement!

making the headers go down as the table goes down in bootrap

Concerned Camel answered on October 11, 2022 Popularity 1/10 Helpfulness 1/10

answer making the headers go down as the table goes down in bootrap

making the headers go down as the table goes down in bootrap

Comment

:root {
  --height-height: 150px;
  /* cell width has to reserve some space for scrolling. Hence the sum < 100% */
  --cell-width: 85px;
}

.header-fixed {
  width: 200px;
}

/* Treat all as divs */
.header-fixed > thead,
.header-fixed > tbody,
.header-fixed > thead > tr,
.header-fixed > tbody > tr,
.header-fixed > thead > tr > th,
.header-fixed > tbody > tr > td {
  display: block;
}

/* Prevent header to wrap */
.header-fixed > thead > tr > th {
  white-space: nowrap;
  background-color: lightgrey;
}

.header-fixed > tbody > tr:after,
.header-fixed > thead > tr:after {
  content: ' ';
  display: block;
  visibility: hidden;
  clear: both;
}

.header-fixed > tbody {
  overflow-y: auto;
  height: var(--height-height);
}

.header-fixed > tbody > tr > td,
.header-fixed > thead > tr > th {
  width: var(--cell-width);
  border: thin solid grey;
  float: left;
}

Popularity 1/10 Helpfulness 1/10 Language whatever

Source: stackoverflow.com

Tags: go whatever

Link to this answer
Share Copy Link

Contributed on Oct 11 2022

Concerned Camel

0 Answers Avg Quality 2/10

making the headers go down as the table goes down in bootrap

Contents

More Related Answers

making the headers go down as the table goes down in bootrap

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.