具有固定标题和滚动表体的表不允许 tbody 滚动答案

【问题标题】：Table with fixed header and scrolling table body doesn't let tbody scroll具有固定标题和滚动表体的表不允许 tbody 滚动
【发布时间】：2017-02-27 10:27:23
【问题描述】：

我有一个引导程序 v.4 表，并希望有一个带有滚动表体的固定标题。表格的大小应该始终保持不变，比如说 100px 的高度和宽度 = auto。

这目前不适用于我附加的代码。

它应该专用于这个单一的表，并且不应该干扰我可能在不同区域使用的所有其他表，所以我已经分配了一个类，不确定这是否正确。

jQuery(document).ready(function($) {
    $('#reservationTable tr').each(function () {
       var td_value = $('td',this).eq(4).text();
       console.log(td_value);
       switch (td_value) {
           case 'Expected':
                $(this).addClass('table-success');
               break;
           case 'Inhouse':
                $(this).addClass('table-info');
               break;
           case 'Cancelled':
                $(this).addClass('table-danger');
               break;
           case 'Partial':
                $(this).addClass('table-warning');
               break;
           case 'Finished':
                $(this).addClass('table-active');
               break;

           default:
               // statements_def
               break;
       }
    });
});

@media screen and (min-width: 699px) {
   table-scrollTBody {
      display: block;
      height: 300px;
      overflow: auto; 
    }
    scrollTBody {
      display: block;
      height: 200px;
      overflow: auto; 
     }

    table-scrollTBodyThead, scrollTBody tr, table-scrollTBodyThead tr {
      display: table;
      width: 100%;
      table-layout: fixed; 
    }
    scrollTD {
      word-wrap: break-word; 
    }
}
@media screen and (max-width: 700px) {
  table-scrollTBody {
    display: block;
    height: 250px;
    overflow: auto; 
  } 
  scrollTBody {
      display: block;
      height: 200px;
      overflow: auto; 
     }

    table-scrollTBodyThead, scrollTBody tr, table-scrollTBodyThead tr {
      display: table;
      table-layout: fixed; 
    }
    scrollTD {
      word-wrap: break-word; 
    }
}

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
 
 
 
        <div class="container" style="" id="reservationListTable">
            <div class="row">
                    <div class="col-md-12">
                        <div class="input-daterange input-group sandbox-container" style="margin-top:0.5em" id="datepicker">
                            <input type="text" class="input-sm form-control" name="start" />
                            <span class="input-group-addon">to</span>
                            <input type="text" class="input-sm form-control" name="end" />
                        </div>
                    </div>
                </div>
            <input style="margin-top:0.5em" class="form-control" type="text" id="reservationListInput" onkeyup="reservationListFunction()" placeholder="Search for reservation..">

           
            
            <table class="table table-responsive table-fixed table-scrollTBody" id="reservationTable">
                <thead class="table-scrollTBodyThead">
                    <tr class="header">
                        <th style="width:40%;">Name</th>
                        <th style="width:10%;">Cabin</th>
                        <th style="width:10%;">Guests</th>
                        <th style="width:10%;">Table</th>
                        <th class="hidden-xs-down" style="width:10%;">Status</th>
                        <th class="hidden-xs-down" style="width:5%;">SR</th>
                        <th class="hidden-xs-down" style="width:5%;">DOB</th>
                        <th style="width:10%;">Action</th>
                    </tr>
                </thead>
                <tbody class="scrollTBody">
                    <tr class="">
                        <td class="scrollTD">Alfreds Futterkiste</td>
                        <td class="scrollTD">49222</td>
                        <td class="scrollTD">14</td>
                        <td class="scrollTD">201</td>
                        <td class="hidden-xs-down scrollTD">Expected</td>
                        <td class="hidden-xs-down scrollTD">SR(2)</td>
                        <td class="hidden-xs-down scrollTD">BD</td>
                        <td class="scrollTD">
                            <div class="btn-group">
                              <button type="button" class="btn btn-secondary btn-sm">Checkin</button>
                              <button type="button" class="btn btn-secondary btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="sr-only">Toggle Dropdown</span>
                              </button>
                              <div class="dropdown-menu">
                                <a class="dropdown-item" href="#">Cancel</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">Edit</a>
                              </div>
                            </div>
                        </td>
                    </tr>
                    <tr class="">
                        <td class="scrollTD">Alfreds Futterkiste</td>
                        <td class="scrollTD">49222</td>
                        <td class="scrollTD">14</td>
                        <td class="scrollTD">201</td>
                        <td class="hidden-xs-down scrollTD">Expected</td>
                        <td class="hidden-xs-down scrollTD">SR(2)</td>
                        <td class="hidden-xs-down scrollTD">BD</td>
                        <td class="scrollTD">
                              <div class="btn-group">
                              <button type="button" class="btn btn-secondary btn-sm">Checkin</button>
                              <button type="button" class="btn btn-secondary btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="sr-only">Toggle Dropdown</span>
                              </button>
                              <div class="dropdown-menu">
                                <a class="dropdown-item" href="#">Cancel</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">Edit</a>
                              </div>
                            </div>
                        </td>
                    </tr>
                    <tr class="">
                        <td class="scrollTD">Alfreds Futterkiste</td>
                        <td class="scrollTD">49222</td>
                        <td class="scrollTD">14</td>
                        <td class="scrollTD">201</td>
                        <td class="hidden-xs-down scrollTD">Cancelled</td>
                        <td class="hidden-xs-down scrollTD">SR(2)</td>
                        <td class="hidden-xs-down scrollTD">BD</td>
                        <td class="scrollTD">
                              <div class="btn-group">
                              <button type="button" class="btn btn-secondary btn-sm">Checkin</button>
                              <button type="button" class="btn btn-secondary btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="sr-only">Toggle Dropdown</span>
                              </button>
                              <div class="dropdown-menu">
                                <a class="dropdown-item" href="#">Cancel</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">Edit</a>
                              </div>
                            </div>
                        </td>
                    </tr>
                    <tr class="">
                        <td class="scrollTD">Alfreds Futterkiste</td>
                        <td class="scrollTD">49222</td>
                        <td class="scrollTD">14</td>
                        <td class="scrollTD">201</td>
                        <td class="hidden-xs-down scrollTD">Finished</td>
                        <td class="hidden-xs-down scrollTD">SR(2)</td>
                        <td class="hidden-xs-down scrollTD">BD</td>
                        <td class="scrollTD">
                            <div class="btn-group">
                              <button type="button" class="btn btn-secondary btn-sm">Checkin</button>
                              <button type="button" class="btn btn-secondary btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="sr-only">Toggle Dropdown</span>
                              </button>
                              <div class="dropdown-menu">
                                <a class="dropdown-item" href="#">Cancel</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">Edit</a>
                              </div>
                            </div>
                        </td>
                    </tr>
                    <tr class="">
                        <td class="scrollTD">Alfreds Futterkiste</td>
                        <td class="scrollTD">49222</td>
                        <td class="scrollTD">14</td>
                        <td class="scrollTD">201</td>
                        <td class="hidden-xs-down scrollTD">Inhouse</td>
                        <td class="hidden-xs-down scrollTD">SR(2)</td>
                        <td class="hidden-xs-down scrollTD">BD</td>
                        <td class="scrollTD">
                            <div class="btn-group">
                              <button type="button" class="btn btn-secondary btn-sm">Checkin</button>
                              <button type="button" class="btn btn-secondary btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="sr-only">Toggle Dropdown</span>
                              </button>
                              <div class="dropdown-menu">
                                <a class="dropdown-item" href="#">Cancel</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">Edit</a>
                              </div>
                            </div>
                        </td>
                    </tr>
                    <tr class="">
                        <td class="scrollTD">Alfreds Futterkiste</td>
                        <td class="scrollTD">49222</td>
                        <td class="scrollTD">14</td>
                        <td class="scrollTD">201</td>
                        <td class="hidden-xs-down scrollTD">Partial</td>
                        <td class="hidden-xs-down scrollTD">SR(2)</td>
                        <td class="hidden-xs-down scrollTD">BD</td>
                        <td class="scrollTD">
                            <div class="btn-group">
                              <button type="button" class="btn btn-secondary btn-sm">Checkin</button>
                              <button type="button" class="btn btn-secondary btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="sr-only">Toggle Dropdown</span>
                              </button>
                              <div class="dropdown-menu">
                                <a class="dropdown-item" href="#">Cancel</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">Edit</a>
                              </div>
                            </div>
                        </td>
                    </tr>
                    <tr class="">
                        <td class="scrollTD">Alfreds Futterkiste</td>
                        <td class="scrollTD">49222</td>
                        <td class="scrollTD">14</td>
                        <td class="scrollTD">201</td>
                        <td class="hidden-xs-down scrollTD">Expected</td>
                        <td class="hidden-xs-down scrollTD">SR(2)</td>
                        <td class="hidden-xs-down scrollTD">BD</td>
                        <td class="scrollTD">
                            <div class="btn-group">
                              <button type="button" class="btn btn-secondary btn-sm">Checkin</button>
                              <button type="button" class="btn btn-secondary btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="sr-only">Toggle Dropdown</span>
                              </button>
                              <div class="dropdown-menu">
                                <a class="dropdown-item" href="#">Cancel</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">Edit</a>
                              </div>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

试试这个：

.table-fixed{
  width: 100%;
  background-color: #f3f3f3;
  tbody{
    height:200px;
    overflow-y:auto;
    width: 100%;
    }
  thead,tbody,tr,td,th{
    display:block;
  }
  tbody{
    td{
      float:left;
    }
  }
  thead {
    tr{
      th{
        float:left;
       background-color: #f39c12;
       border-color:#e67e22;
      }
    }
  }
}

HTML 代码：

<div class="container">
  <table class="table table-fixed">
    <thead>
      <tr>
        <th class="col-xs-3">First Name</th>
        <th class="col-xs-3">Last Name</th>
        <th class="col-xs-6">E-mail</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="col-xs-3">John</td>
        <td class="col-xs-3">Doe</td>
        <td class="col-xs-6">johndoe@email.com</td>
      </tr>

      <tr>
        <td class="col-xs-3">John</td>
        <td class="col-xs-3">Doe</td>
        <td class="col-xs-6">johndoe@email.com</td>
      </tr>
      <tr>
        <td class="col-xs-3">John</td>
        <td class="col-xs-3">Doe</td>
        <td class="col-xs-6">johndoe@email.com</td>
      </tr>
      <tr>
        <td class="col-xs-3">John</td>
        <td class="col-xs-3">Doe</td>
        <td class="col-xs-6">johndoe@email.com</td>
      </tr>
      <tr>
        <td class="col-xs-3">John</td>
        <td class="col-xs-3">Doe</td>
        <td class="col-xs-6">johndoe@email.com</td>
      </tr>
      <tr>
        <td class="col-xs-3">John</td>
        <td class="col-xs-3">Doe</td>
        <td class="col-xs-6">johndoe@email.com</td>
      </tr>
      <tr>
        <td class="col-xs-3">John</td>
        <td class="col-xs-3">Doe</td>
        <td class="col-xs-6">johndoe@email.com</td>
      </tr>
      <tr>
        <td class="col-xs-3">John</td>
        <td class="col-xs-3">Doe</td>
        <td class="col-xs-6">johndoe@email.com</td>
      </tr>
      <tr>
        <td class="col-xs-3">John</td>
        <td class="col-xs-3">Doe</td>
        <td class="col-xs-6">johndoe@email.com</td>
      </tr>
      <tr>
        <td class="col-xs-3">John</td>
        <td class="col-xs-3">Doe</td>
        <td class="col-xs-6">johndoe@email.com</td>
      </tr>
      <tr>
        <td class="col-xs-3">John</td>
        <td class="col-xs-3">Doe</td>
        <td class="col-xs-6">johndoe@email.com</td>
      </tr>
      <tr>
        <td class="col-xs-3">John</td>
        <td class="col-xs-3">Doe</td>
        <td class="col-xs-6">johndoe@email.com</td>
      </tr>
      <tr>
        <td class="col-xs-3">John</td>
        <td class="col-xs-3">Doe</td>
        <td class="col-xs-6">johndoe@email.com</td>
      </tr>
      <tr>
        <td class="col-xs-3">John</td>
        <td class="col-xs-3">Doe</td>
        <td class="col-xs-6">johndoe@email.com</td>
      </tr>
      <tr>
        <td class="col-xs-3">John</td>
        <td class="col-xs-3">Doe</td>
        <td class="col-xs-6">johndoe@email.com</td>
      </tr>
      <tr>
        <td class="col-xs-3">John</td>
        <td class="col-xs-3">Doe</td>
        <td class="col-xs-6">johndoe@email.com</td>
      </tr>
      <tr>
        <td class="col-xs-3">John</td>
        <td class="col-xs-3">Doe</td>
        <td class="col-xs-6">johndoe@email.com</td>
      </tr>
      <tr>
        <td class="col-xs-3">John</td>
        <td class="col-xs-3">Doe</td>
        <td class="col-xs-6">johndoe@email.com</td>
      </tr>
      <tr>
        <td class="col-xs-3">John</td>
        <td class="col-xs-3">Doe</td>
        <td class="col-xs-6">johndoe@email.com</td>
      </tr>
      <tr>
        <td class="col-xs-3">John</td>
        <td class="col-xs-3">Doe</td>
        <td class="col-xs-6">johndoe@email.com</td>
      </tr>
    </tbody>
  </table>
</div>

请查看 CodePen：https://codepen.io/anon/pen/OpVORa

【讨论】：

仅将这个 CSS 分配给专用表并不能解决我的问题，但谢谢。
@Chris：请查看更新后的答案并添加 codepen 以供参考。希望这对你有用。

【解决方案2】：

在实现其他 css 的情况下，最简单的方法是使用两个表，一个仅用于标题，另一个用于正文，带有滚动。像这样：

<table class="table tex-sm">
    <thead class="thead-dark">
        <tr>
            <th>Data</th>
            <th>Nume</th>
            <th>Document</th>
            <th>Optiuni</th>
        </tr>
    </thead>
</table>
<div class="list-container-h30 scrolled-y">
    <table class="table table-striped table-hover text-sm">
        <tbody>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
</div>

不用说，包含第二个表格的 div 具有固定高度，在本例中为 30%，并且仅滚动 Y 轴。

这是我正在使用的，它是任何人都可以做的最简单有效的设置。

【讨论】：