How Can I Make a Table's TBody Scrollable with a Fixed Height?

Setting TBody Height with Overflow Scroll

When attempting to set the height of a table body (tbody) with overflow scroll, users may encounter difficulties. Here's a step-by-step guide to achieve the desired result:

To ensure that the tbody displays a scrollbar, specify its display property as block. This will allow content to flow vertically.

Next, set the display property of each tr element within the tbody to table. This will maintain the table-like behavior of the rows.

To distribute the cells evenly, employ the table-layout: fixed; property on the parent table element. This ensures that all cells have the same width and prevents the table from collapsing.

It's important to note that modern approaches favor Grid layouts over the technique described here. Grid layouts offer improved control and fewer side effects.

Here's a CSS example to demonstrate the solution:

table, tr td {
  border: 1px solid red;
}

tbody {
  display: block;
  height: 50px;
  overflow: auto;
}

thead, tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

thead {
  width: calc(100% - 1em);
}

table {
  width: 400px;
}

If the tbody still doesn't display a scrollbar due to insufficient content, explicitly set the overflow-y property to scroll.

However, it's crucial to acknowledge certain drawbacks of this approach:

• It separates the thead and tbody cell grids, potentially affecting alignment.
• There are better alternatives available nowadays, such as Grid layouts, that avoid these issues.

The above is the detailed content of How Can I Make a Table's TBody Scrollable with a Fixed Height?. For more information, please follow other related articles on the PHP Chinese website!