Why Doesn't My tbody Scroll?

Addressing Overflow Scrolling in Table Bodies (tbody)

In an effort to set the height of a tbody element while enabling overflow scrolling, you may have encountered the following CSS snippet:

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

Despite implementing this styling, the tbody element remains unresponsive to scrolling. To rectify this issue, consider leveraging the following CSS rules:

• display: block; for tbody: Transform the tbody element into a block element to allow scrolling.
• display: table; for tr: Maintain the table behavior by setting the display property of each tr element to table.
• table-layout: fixed; for tr and thead: Ensure even distribution of cells by employing table-layout: fixed; for both tr and thead elements.

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); /* Adjust for scrollbar width */
}

table {
  width: 400px;
}

In the event that the tbody element still fails to display a scrollbar due to insufficient content, explicitly set the overflow property to overflow-y: scroll; to force the appearance of a scrollbar.

tbody {
  ...
  overflow-y: scroll;
}

Note: It is crucial to be aware that this approach to achieving table scrolling may have limitations in certain scenarios. In particular, it can lead to misalignment between header and body cells. If alignment is crucial, consider using a more robust layout technique such as CSS Grid.

The above is the detailed content of Why Doesn't My tbody Scroll?. For more information, please follow other related articles on the PHP Chinese website!