角垫桌滚动水平粘性标头

发布于 2025-02-07 08:26:17 字数 315 浏览 1 评论 0 原文

我们如何将水平滚动条添加到带有角桌粘结标头的垫子桌上？

#CSS代码

#table {
  width: 100%;
}
#table tr.mat-row{
  height: 40px;
}

#html代码

原文

How do we add a horizontal scroll bar to a mat table with angular table sticky header ?

#css code

#table {
  width: 100%;
}
#table tr.mat-row{
  height: 40px;
}

#html code

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

抹茶夏天i‖ 2025-02-14 08:26:17

请看一下这篇文章：带有粘贴桌标题和水平，垂直滚动条

您可以将宽度和高度设置为垫子包裹的Div容器包裹。在Stylesheet上，您可以应用类似的内容：

.example-container {
  width: 100%;
  height: calc(100vh - 32px);
  overflow: auto;
}

示例水平和垂直滚动：

要删除垂直滚动调整.example-container css类，例如

.example-container {
  width: 100%;
  height: calc(100vh - 32px);
  overflow-x: auto;
  overflow-y: hidden !important;
}

： https://stackblitz.com/edit/edit/angular-hdg9xh-3xyt8z？列-example.css

如果您想水平浏览数据，则希望第一列充当表标头。

示例

<table>
  <tr>
    <th>Date</th>
    <td>12 February</td>
    <td>24 March</td>
    <td>14 April</td>
  </tr>
  <tr>
    <th>Event</th>
    <td>Waltz with Strauss</td>
    <td>The Obelisks</td>
    <td>The What</td>
  </tr>
  <tr>
    <th>Venue</th>
    <td>Main Hall</td>
    <td>West Wing</td>
    <td>Main Hall</td>
  </tr>
</table>

Please take a look at this post : Mat Table with sticky header and Horizontal ,vertical scroll bar

You can set the width and height to the div container wrap around the mat-table. On stylesheet, you can apply something like this:

.example-container {
  width: 100%;
  height: calc(100vh - 32px);
  overflow: auto;
}

Example with horizontal and vertical scroll: https://stackblitz.com/edit/angular-hdg9xh-uxkaeh

To remove vertical scroll adjust the .example-container css class to be

.example-container {
  width: 100%;
  height: calc(100vh - 32px);
  overflow-x: auto;
  overflow-y: hidden !important;
}

Example : https://stackblitz.com/edit/angular-hdg9xh-3xyt8z?file=src%2Fapp%2Ftable-sticky-columns-example.css

If you want to scroll through data just horizontally you would want the first column to act as the table header.

Example

<table>
  <tr>
    <th>Date</th>
    <td>12 February</td>
    <td>24 March</td>
    <td>14 April</td>
  </tr>
  <tr>
    <th>Event</th>
    <td>Waltz with Strauss</td>
    <td>The Obelisks</td>
    <td>The What</td>
  </tr>
  <tr>
    <th>Venue</th>
    <td>Main Hall</td>
    <td>West Wing</td>
    <td>Main Hall</td>
  </tr>
</table>

回复收藏 0 原文

~没有更多了~