Question

在我的Angular程序中，我希望有一个可滚动的表。我已经尝试过使用我在这里看过的CSS，但它根本不像我看到的那样工作。我在这里做了一个bootply：https://www.bootply.com/el0aE4hBfj

每当我添加我见过的<asp:GridView ID="GridView1" runat="server" OnRowCommand="GridView1_RowCommand" >以使其可滚动时：

.css

它，完全摧毁它。

如何让我的桌子可滚动？

Answer 1

一种可能的解决方案是将表格包装成div并设置以下样式：

.t-wrapper {
    max-width: 100%;
    overflow-x: auto;
}

使用以下HTML

<div class="t-wrapper">
    <table>
        // Your table...
    </table>
</div>

如果表格不适合容器，这将使表格可滚动。

Answer 2

通过添加：

修正了它

＆＃13;

tbody {
  display: block;
  height: 195px;
  overflow: auto;
}

thead, tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

thead {
  width: calc( 100% - 1em )
}

＆＃13;

而不是我在OP中的内容

Bootsrap垂直可滚动表

2 个答案: