Question

我正在努力使桌面滚动。我尝试使用overflow属性并在我的类中给div一些这样的高度，但它似乎不适用于我的情况。

.tbody-row {
   display: table-row;
   overflow-y:scroll;
   height:100px;
}

如果我将表格代码放在div下面，那么它将使表格滚动，但同时表格标题将不会固定在他们的位置。

<div style="height:100px;overflow:auto;">

 ... My table code ...

</div>

在我的代码段

下面

#table {
  display: table;
  width: 100%;
  background: #fff;
  margin: 0;
  box-sizing: border-box;
}

.header-row {
  background: #8b8b8b;
  color: #fff;
}

.row {
  display: table-row;
}

.tbody-row {
   display: table-row;
   overflow-y:scroll;
   height:100px;
}

select:required:invalid {
  color: gray;
}

option[value=""][disabled] {
  display: none;
}

option {
  color: black;
}

.cell {
  display: table-cell;
  padding: 23px;
  border-bottom: 1px solid #e5e5e5;
  text-align: center;
}

.primary {
  text-align: left;
}

input[type="radio"],
input[type="checkbox"] {
  display: none;
}

<div id="table">
  <div class="header-row row">
    <span class="cell">SL. No.</span>
    <span class="cell">Application Date</span>
    <span class="cell">Customer Name</span>
    <span class="cell">Loan Amount</span>
    <span class="cell">Loan Status</span>
    <span class="cell">Action</span>
  </div>

  <div class="tbody-row"  *ngFor="let item of customerList ; let i= index;">
    <input type="radio" name="expand">
    <span class="cell" data-label="SL. No.">{{i+1}}</span>
    <span class="cell" data-label="Application Date">{{item.date}}</span>
    <span class="cell" data-label="Customer Name">
      {{item.customerName}}</span>
    <span class="cell" data-label="Loan Amount">{{item.loanAmount}}</span>
    <span class="cell" data-label="Loan Status">{{item.status}}</span>
    <span class="cell" data-label="Action">
      <a class="action" href="javascript:void(0)" (click)="openUserDetailsPage()">More Details</a>
    </span>
  </div>
</div>

代码编辑器链接：https://stackblitz.com/edit/angular-fb3bnc

Answer 1

.table-fixed thead {
  width: 97%;
}

.table-fixed tbody {
  height: 230px;
  overflow-y: auto;
  width: 100%;
}
.table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th {
  display: block;
}
.table-fixed tbody td, .table-fixed thead > tr> th {
  float: left;
  border-bottom-width: 0;
}

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" crossorigin="anonymous">
    <title>Hello, world!</title>
  </head>
  <style>
  
  </style>
  <body>
  <table class="table table-fixed">
          <thead>
            <tr>
              <th class="col-xs-2">#</th><th class="col-xs-8">Name</th><th class="col-xs-2">Points</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="col-xs-2">1</td><td class="col-xs-8">Mike Adams</td><td class="col-xs-2">23</td>
            </tr>
            <tr>
              <td class="col-xs-2">2</td><td class="col-xs-8">Holly Galivan</td><td class="col-xs-2">44</td>
            </tr>
            <tr>
              <td class="col-xs-2">3</td><td class="col-xs-8">Mary Shea</td><td class="col-xs-2">86</td>
            </tr>
            <tr>
              <td class="col-xs-2">4</td><td class="col-xs-8">Jim Adams</td><td>23</td>
            </tr>
            <tr>
              <td class="col-xs-2">5</td><td class="col-xs-8">Henry Galivan</td><td class="col-xs-2">44</td>
            </tr>
            <tr>
              <td class="col-xs-2">6</td><td class="col-xs-8">Bob Shea</td><td class="col-xs-2">26</td>
            </tr>
            <tr>
              <td class="col-xs-2">7</td><td class="col-xs-8">Andy Parks</td><td class="col-xs-2">56</td>
            </tr>
            <tr>
              <td class="col-xs-2">8</td><td class="col-xs-8">Bob Skelly</td><td class="col-xs-2">96</td>
            </tr>
            <tr>
              <td class="col-xs-2">9</td><td class="col-xs-8">William Defoe</td><td class="col-xs-2">13</td>
            </tr>
            <tr>
              <td class="col-xs-2">10</td><td class="col-xs-8">Will Tripp</td><td class="col-xs-2">16</td>
            </tr>
            <tr>
              <td class="col-xs-2">11</td><td class="col-xs-8">Bill Champion</td><td class="col-xs-2">44</td>
            </tr>
            <tr>
              <td class="col-xs-2">12</td><td class="col-xs-8">Lastly Jane</td><td class="col-xs-2">6</td>
            </tr>
          </tbody>
        </table>
        
        
        
        
        	
 <!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>

Answer 2

尝试为标题和正文部分使用两个单独的表。如果可能，请尝试通过为两个表设置table-layout: fixed来使用固定布局表。

类似的例子：https://codepen.io/tjvantoll/pen/JEKIu

如何使用css使表体可滚动和表头固定

2 个答案: