具有固定标题和滚动表体的表不会让tbody滚动

时间：2017-02-27 10:27:24

标签： javascript jquery html css twitter-bootstrap

我有一个bootstrap 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>

2 个答案:

答案 0 :(得分：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 code：

<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

答案 1 :(得分：0)

使用其他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轴滚动。

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

相关问题
最新问题