帶固定標題和滾動表體的表不會讓tbody滾動

Question

我有一個引導程序v.4表，並且希望具有滾動表體的固定標題。表的大小應始終保持在100px的高度和寬度=自動。

這目前不適用於我附加的代碼。

它應該是專門用於這張單獨的表格，並且不應該干擾我可能在不同區域使用的所有其他表格，所以我已經分配了一個類別，不知道這是否正確。

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>

Answer 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