在某个点之后如何使动态引导表可滚动？答案

【问题标题】：How do you make dynamic bootstrap table scrollable after a certain point?在某个点之后如何使动态引导表可滚动？
【发布时间】：2021-10-25 21:28:55
【问题描述】：

如何在动态表格中添加 5 行后添加垂直滚动条？

jsfiddle：http://jsfiddle.net/gLrhnqo2/

这只会创建一块空白空间，并在某些像素后变得可滚动。

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

table{
 height:300px; 
 display: -moz-groupbox;
}
tbody{
  overflow-y: scroll;
  height: 200px;
  width: 100%;
  position: absolute;
}

【问题讨论】：

您能否编辑您的问题以将您的代码作为minimal reproducible example在您的问题正文中包含在内？外部链接往往会随着时间的推移而改变/中断，并导致您问题的未来访问者感到头疼/价值降低。

标签： javascript css angular twitter-bootstrap html-table

【解决方案1】：

您可以在您的tbody 上应用max-height，但it normally doesn't respect any overflow settings。在其上使用display: block 以到达您想要到达的位置（请注意，如果没有足够的保护措施，这会破坏表格列的垂直布局）。

var i=1;
     $("#add_row").click(function(){
      $('#addr'+i).html("<td>"+ (i+1) +"</td><td><input name='user"+i+"' type='text' placeholder='User' class='form-control input-md'  /></td><td><input  name='pass"+i+"' type='text' placeholder='Password'  class='form-control input-md'></td><td><input  name='ip"+i+"' type='text' placeholder='IP'  class='form-control input-md'></td><td><input  name='country"+i+"' type='text' placeholder='Country'  class='form-control input-md'></td><td><input  name='ipDisp"+i+"' type='text' placeholder='IP details'  class='form-control input-md'></td>");

      $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
      i++; 
  });
     $("#delete_row").click(function(){
         if(i>1){
         $("#addr"+(i-1)).html('');
         i--;
         }
     });

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

table{
 max-height:300px; 
 display: -moz-groupbox;
}
tbody{
  display: block;
  overflow-y: scroll;
  max-height: 200px;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <table class="table table-bordered table-hover" id="tab_logic">
                <thead>
                    <tr >
                        <th class="text-center">
                            #
                        </th>
                        <th class="text-center">
                            User
                        </th>
                        <th class="text-center">
                            Password
                        </th>
                        <th class="text-center">
                            IP
                        </th>
                        <th class="text-center">
                            Country
                        </th>
                        <th class="text-center">
                            IP disponibility
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr id='addr0'>
                        <td>
                        1
                        </td>
                        <td>
                        <input type="text" name='user0'  placeholder='User' class="form-control"/>
                        </td>
                        <td>
                        <input type="text" name='pass0' placeholder='Password' class="form-control"/>
                        </td>
                        <td>
                        <input type="text" name='ip0' placeholder='IP' class="form-control"/>
                        </td>
                        <td>
                        <input type="text" name='country0' placeholder='Country' class="form-control"/>
                        </td>
                        <td>
                        <input type="text" name='ipDisp0' placeholder='IP Details' class="form-control"/>
                        </td>
                    </tr>
                    <tr id='addr1'></tr>
                </tbody>
            </table>
        </div>
    </div>
    <a id="add_row" class="btn btn-default pull-left">Add Row</a><a id='delete_row' class="pull-right btn btn-default">Delete Row</a>
</div>

【讨论】：