Bulma css 表只有 tbody 可以垂直滚动

Question

我正在使用 Bulma CSS 来设计我的 Rails 7 应用程序的样式，并且我有一个表格想要垂直滚动，但只有 tbody。

Bulma 文档提到“table-container”div 包装器与“is-scrollable”一起使用，但这似乎对垂直滚动没有任何影响，只有水平滚动。

我能够修改“application.css.sass”文件中的类以使整个表格可滚动，如下所示：

.table-container {
  max-height: 780px;
  overflow-y: auto;
}

如何修改 css，以便只有 tbody 可以滚动（同时修复标题）？

已经尝试过：

.table-container tbody {
  overflow: hidden;
  max-height: 780px;

  tbody {
    display: block;
    overflow-y: auto;
    max-height: inherit;
  }
}

这不起作用，因为

display: block

破坏了单元格对齐。

Answer 1

此代码实现了与之前相同的结果，仅使 tbody 可以垂直滚动，同时保持 header 固定。根据您的需要调整最大高度值。

.table-container {
  max-height: 780px;
  overflow-y: auto; /* Enable vertical scrolling */
}

.table-container tbody {
  display: block; /* Make tbody a block element */
  max-height: 600px; /* Limit tbody height */
  overflow-y: auto; /* Enable tbody vertical scrolling */
}

/* Additional styles for table layout */
.table-container table {
  width: 100%; /* Make table width 100% */
  border-collapse: collapse; /* Collapse table borders */
}

.table-container thead {
  background-color: #f5f5f5; /* Background color for the header */
}

.table-container tbody tr {
  display: table; /* Maintain table layout for tbody rows */
  width: 100%; /* Ensure row width is 100% */
  table-layout: fixed; /* Fix the table layout */
}