Can a table be created in bootstrap with fixed headers and scrollable content similar to the example shown here?
- Is it possible for columns to adjust their size based on the content they contain (wider or narrower)?
- Also, is it possible to have a horizontal scroll bar when there are more columns than can be displayed?
- Are there options to set minimum and maximum widths for the columns?
After researching, I only found a solution that requires knowing the number of columns in order to size them correctly using a flexible approach like demonstrated here.
table {
box-sizing: border-box;
-moz-box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: stretch;
height: 500px; /* this can vary */
}
table * {
box-sizing: inherit;
-moz-box-sizing: inherit;
}
thead {
display: flex;
flex-direction: column;
align-items: stretch;
}
tbody {
overflow-y: scroll;
display: inline-block;
}
thead > tr, tbody > tr, tfoot > tr {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
thead, tfoot {
flex-shrink: 0;
}
th, tbody td {
width: 20%; /* this can vary */
overflow-x: hidden;
text-overflow: ellipsis;
display: inline-block;
}
tfoot {
display: inline-block;
}
tfoot td {
width: 100%;
display: inline-block;
}