如何在bootstrap模态体上创建一个带有固定标题的可滚动表？

Question

我尝试这个，但这不起作用。字段值是动态来的。所以宽度不固定。

<div class="table-responsive">

    <table class="table table-hover">
  <thead>

      <tr>
     ...

      </tr>
    </thead>

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

Answer 1

HTML

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
              <table id="myTable" class="table fix-head  table-striped">
            <thead>
                <tr id="pp">
                    <th>Column1</th>
                    <th >Column2</th>
                    <th >Column3</th>
                    <th >Column4</th>
                    <th>Column5</th>
                  <th>Column6</th>
                  <th>Column7</th>
                  <th>Column8</th>
                  <th>Column9</th>
                </tr>
            </thead>
            <tbody style="height:110px">
              <tr>
              <td>1</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
               <td>Table cell</td>
               <td>Table cell</td>
               <td>Table cell</td>
                <td>Table cell</td>
            </tr>
            <tr>
              <td>2</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
            </tr>
            <tr>
              <td>3</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
            </tr>
            <tr>
              <td>4</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
            </tr>
            <tr>
              <td>5</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
            </tr>
            <tr>
              <td>6</td>

              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
            </tr>
            <tr>
              <td>7</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
            </tr>
            <tr>
              <td>8</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
              <td>Table cell</td>
            </tr>
            </tbody>
        </table>
    </div>
  </div>
</div>

CSS

table.fix-head>tbody, table {
        display:block;

    }

     table.fix-head>tbody {
        overflow-y: scroll;
        height: 100px;
}
#pp th{

  padding-right:28px;
}
#myTable{
  width:100%;
}

JS

 $(document).ready(function(){
      $('#myModal').on('shown.bs.modal', function () {
        $(this).find('.modal-dialog').css({width:'auto',
                                   height:'auto', 
                                  'max-height':'100%'});
    });
  });

在这里查看DEMO ： http ： //codepen.io/ihemant360/pen/vKjNdm

Answer 2

我找到了解决此问题的方法，如果你只需要在模态体中显示表，这就有效。

您可以在模态标题和表格主体中添加表格标题。 给模态体提供固定高度，并向其添加“overflow-y：scroll”。

希望它对某人有帮助。

Answer 3

您可以在模态标题和表格主体中添加表格标题。 给模态体提供固定高度，并向其添加“overflow-y：scroll”。

希望它对某人有帮助。