161

我想在我的网站上有一张桌子。问题是该表将有大约 400 行。如何限制表格的高度，并对其应用滚动条？这是我的代码：

<div class="span3">
  <h2>Achievements left</h2>
<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Something</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Something</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Something</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Something</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Something</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Something</td>
    </tr>
  </tbody>
</table>

  <p><a class="btn" href="#">View details &raquo;</a></p>
</div>

我试图将最大高度和固定高度应用于表格，但它不起作用。

4

16 回答 16

263

表格元素似乎不直接支持这一点。将表格放在 div 中并设置 div 的高度并设置overflow: auto.

于 2012-05-02T19:15:41.223 回答
57 
.span3 {  
    height: 100px !important;
    overflow: scroll;
}​

您需要将它包装在它自己的 div 中，或者给 span3 一个它自己的 id，这样您就不会影响整个布局。

这是一个小提琴：http: //jsfiddle.net/zm6rf/

于 2012-05-02T19:19:34.507 回答
44

不需要将它包装在一个div中......

CSS：

tr {
width: 100%;
display: inline-table;
table-layout: fixed;
}

table{
 height:300px;              // <-- Select the height of the table
 display: -moz-groupbox;    // Firefox Bad Effect
}
tbody{
  overflow-y: scroll;      
  height: 200px;            //  <-- Select the height of the body
  width: 100%;
  position: absolute;
}

引导层：http : //www.bootply.com/AgI8LpDugl

于 2014-05-07T13:13:34.260 回答
35

我遇到了同样的问题，并使用了上述解决方案的组合（并添加了我自己的一个转折点）。请注意，我必须指定列宽以使它们在标题和正文之间保持一致。

在我的解决方案中，页眉和页脚在正文滚动时保持固定。

<div class="table-responsive">
    <table class="table table-striped table-hover table-condensed">
        <thead>
            <tr>
                <th width="25%">First Name</th>
                <th width="13%">Last Name</th>
                <th width="25%" class="text-center">Address</th>
                <th width="25%" class="text-center">City</th>
                <th width="4%" class="text-center">State</th>
                <th width="8%" class="text-center">Zip</th>
            </tr>
        </thead>
    </table>
    <div class="bodycontainer scrollable">
        <table class="table table-hover table-striped table-condensed table-scrollable">
            <tbody>
                <!-- add rows here, specifying same widths as in header, at least on one row -->
            </tbody>
        </table>
    </div>
    <table class="table table-hover table-striped table-condensed">
        <tfoot>
            <!-- add your footer here... -->
        </tfoot>
    </table>
</div>

然后只需应用以下 CSS：

.bodycontainer { max-height: 450px; width: 100%; margin: 0; overflow-y: auto; }
.table-scrollable { margin: 0; padding: 0; }

我希望这对其他人有帮助。

于 2013-08-30T16:50:45.200 回答
10

CSS

.achievements-wrapper { height: 300px; overflow: auto; }

HTML

<div class="span3 achievements-wrapper">
    <h2>Achievements left</h2>
    <table class="table table-striped">
    ...
    </table>
</div>
于 2012-05-02T19:24:49.947 回答
9

我最近不得不用 bootstrap 和 angularjs 来做这件事，我创建了一个 angularjs 指令来解决这个问题，你可以在这篇博文中看到一个工作示例和详细信息。

您只需向 table 标记添加一个固定标题属性即可使用它：

<table class="table table-bordered" fixed-header>
...
</table>

如果您不使用 angularjs，您可以调整指令的 javascript 并直接使用它。

于 2014-07-18T00:05:54.233 回答
5

将表放在一个 div 中，并为该 div 赋予 class pre-scrollable。

于 2017-12-17T20:23:30.200 回答
4

所有上述解决方案也使表头滚动......如果你只想滚动 tbody 然后应用这个：

tbody {
    height: 100px !important;
    overflow: scroll;
    display:block;
}
于 2014-01-02T14:13:30.640 回答
4

这可能不是大行数的解决方案。我只是使用复制表技巧来完成小行数表的工作，同时它可以保持弹性列宽，你可以试试这个小提琴。

（固定宽度列是我用于大行计数表的方法，只需要标题行重复）

示例代码： 

<div style="height:30px;overflow:hidden;margin-right:15px;">
   <table class="table">
       <thead>
           <tr>
                <th>Col 1</th>
                <th>Col 2</th>
                <th>Col 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Cel 1,1</td>
                <td>Cel 1,2</td>
                <td>Cel 1,3</td>
            </tr>
            <tr>
                <td>Cel 2,1</td>
                <td>Cel 2,2</td>
                <td>Cel 2,3</td>
            </tr>
            <tr>
                <td>Cel 3,1</td>
                <td>Cel 3,2</td>
                <td>Cel 3,3</td>
            </tr>


        </tbody>
    </table>
</div>
<div style="height:100px;overflow-y:scroll;;">
    <table class="table">
        <thead>

        </thead>
        <tbody>
            <tr>
                <td>Cel 1,1</td>
                <td>Cel 1,2</td>
                <td>Cel 1,3</td>
            </tr>
            <tr>
                <td>Cel 2,1</td>
                <td>Cel 2,2</td>
                <td>Cel 2,3</td>
            </tr>
            <tr>
                <td>Cel 3,1</td>
                <td>Cel 3,2</td>
                <td>Cel 3,3</td>
            </tr>
             <tr style="color:white">
                <th>Col 1</th>
                <th>Col 2</th>
                <th>Col 3</th>
            </tr>
        </tbody>
    </table>
</div>
于 2014-12-27T06:14:13.570 回答
4

这个例子展示了在使用 Bootstrap 4 表格样式时如何使用粘性标题。

.table-scrollable {
    /* set the height to enable overflow of the table */
    max-height: 200px;
    
    overflow-x: auto;
    overflow-y: auto;
    scrollbar-width: thin;
}

.table-scrollable thead th {
    border: none;
}

.table-scrollable thead th {
    /* Set header to stick to the top of the container. */
    position: sticky; 
    top: 0px;
    
    /* This is needed otherwise the sticky header will be transparent 
    */
    background-color: white;

    /* Because bootstrap adds `border-collapse: collapse` to the
     * table, the header boarders aren't sticky.
     * So, we need to make some adjustments to cover up the actual
     * header borders and created fake borders instead
     */
    margin-top: -1px;
    margin-bottom: -1px;

    /* This is our fake border (see above comment) */
    box-shadow: inset 0 1px 0 #dee2e6,
                inset 0 -1px 0 #dee2e6;
}
<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<!-- jQuery and JS bundle w/ Popper.js -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>


<div class="dashboard-container card">
  <div class="card-body">
    <div class="table-scrollable">
      <table class="table table-hover table-sortable">
          <thead>
              <tr>
                  <th data-sort-type="text">Course</th>
                  <th data-sort-type="numeric">In Progress</th>
                  <th data-sort-type="numeric">Not Started</th>
                  <th data-sort-type="numeric">Passed</th>
                  <th data-sort-type="numeric">Failed</th>
              </tr>
          </thead>
          <tbody>
            <tr>
              <td>How to be good at stuff</td>
              <td>0</td>
              <td>1000</td>
              <td>0</td>
              <td>0</td>
            </tr>
            <tr>
              <td>Quantum physics for artists</td>
              <td>200</td>
              <td>6</td>
              <td>66</td>
              <td>66</td>
            </tr>
            <tr>
              <td>The best way to skin a cat</td>
              <td>34</td>
              <td>16</td>
              <td>200</td>
              <td>7</td>
            </tr>
            <tr>
              <td>Human cookbook</td>
              <td>4</td>
              <td>7</td>
              <td>4</td>
              <td>50</td>
            </tr>
            <tr>
              <td>Aristocracy rules</td>
              <td>100</td>
              <td>3</td>
              <td>6</td>
              <td>18</td>
            </tr>
          </tbody>
      </table>
    </div>
  </div>
</div>

于 2020-11-03T00:59:52.527 回答
3

我最近遇到了类似的问题，并最终使用不同解决方案的混合物来修复它。

第一个也是最简单的一个是使用两个表格，一个用于标题，一个用于正文。这可行，但标题和正文列未对齐。而且，由于我想使用 twitter 引导表附带的自动大小，我最终创建了一个 Javascript 函数，该函数在以下情况下更改标题：调整窗口大小；列中的数据发生变化等。

这是我使用的一些代码：

        <table class="table table-striped table-hover" style="margin-bottom: 0px;">
        <thead>
            <tr>
                <th data-sort="id">Header 1</i></th>
                <th data-sort="guide">Header 2</th>
                <th data-sort="origin">Header 3</th>
                <th data-sort="supplier">Header 4</th>
            </tr>
        </thead>
    </table>
    <div class="bodycontainer scrollable">
        <table class="table table-hover table-striped table-scrollable">
            <tbody id="rows"></tbody>
        </table>
    </div>

标题和正文分为两个单独的表。其中之一是在具有必要样式的 DIV 中生成垂直滚动条。这是我使用的 CSS：

.bodycontainer {
  //height: 200px
  width: 100%;
  margin: 0;
}

.table-scrollable {
  margin: 0px;
  padding: 0px;
}

我在这里评论了高度，因为我希望表格到达页面底部，无论页面高度是多少。

我在标题中使用的数据排序属性也用于每个 td。这样我可以获得每个 td 的宽度和填充以及行的宽度。使用我使用 CSS 设置的数据排序属性，相应地每个标题的填充和宽度以及标题行的填充和宽度，因为它没有滚动条，所以它总是更大。这是使用咖啡脚本的功能：

fixHeaders: =>
  for header, i in @headers
    tdpadding = parseInt(@$("td[data-sort=#{header}]").css('padding'))
    tdwidth = parseInt(@$("td[data-sort=#{header}]").css('width'))
    @$("th[data-sort=#{header}]").css('padding', tdpadding)
    @$("th[data-sort=#{header}]").css('width', tdwidth)
    if (i+1) == @headers.length
      trwidth = @$("td[data-sort=#{header}]").parent().css('width')
      @$("th[data-sort=#{header}]").parent().parent().parent().css('width', trwidth)
      @$('.bodycontainer').css('height', window.innerHeight - ($('html').outerHeight() -@$('.bodycontainer').outerHeight() ) ) unless @collection.length == 0

在这里，我假设您有一个名为 @headers 的标头数组。

它不漂亮，但它有效。希望它可以帮助某人。

于 2013-06-18T18:46:29.223 回答
3

这些答案都没有让我满意。他们要么没有将表格标题行固定到位，要么他们需要固定的列宽才能工作，即使这样，标题行和正文行也会在各种浏览器中错位。

我建议咬紧牙关，使用适当的网格控件，如jsGrid或我个人最喜欢的SlickGrid。它显然引入了依赖关系，但如果您希望您的表格表现得像具有跨浏览器支持的真实网格，这将节省您的精力。如果需要，它还为您提供了对列进行排序和调整大小以及大量其他功能的选项。

于 2015-02-20T01:35:59.980 回答
2

重新乔纳森伍德的建议。当我使用 CMS 时，我没有用新的 div 包装表格的选项。使用 JQuery 这是我所做的：

$( "table" ).wrap( "<div class='table-overflow'></div>" );

这使用类“table-overflow”的新 div 包装表元素。

然后，您可以简单地在您的 css 文件中添加以下定义：

.table-overflow { overflow: auto; }
于 2016-05-31T09:16:52.023 回答
1

将表格放在 div 中以垂直滚动表格。更改overflow-y为overflow-x使表格可水平滚动。只是overflow为了使表格可以水平和垂直滚动。

<div style="overflow-y: scroll;"> 
    <table>
    ...
    </table>
</div>
于 2018-12-31T09:19:53.343 回答
1

我添加.table-responsive到表中并且它起作用了。从文档

通过使用 .table-responsive{-sm|-md|-lg|-xl} 包装任何 .table 来创建响应式表格，使表格在每个最大宽度断点处水平滚动，最多（但不包括）576px、768px、分别为 992 像素和 1120 像素。

于 2020-11-14T06:17:55.357 回答
0

想我会在这里发帖，因为我无法让上述任何内容与 Bootstrap 4 一起使用。我在网上找到了这个并且对我来说非常适合......

table
{
    width: 100%;
    display: block;
    border:solid black 1px;
}

thead
{
    display: inline-block;
    width: 100%;
    height: 20px;
}

tbody
{
    height: 200px;
    display: inline-block;
    width: 100%;
    overflow: auto;
}

th, td
{
    width: 100px;
    border:solid 1px black;
    text-align:center;
}

我还附上了工作的 jsfindle。

https://jsfiddle.net/jgngg28t/

希望它可以帮助别人。

于 2018-04-10T20:59:42.990 回答