Question

我是网络开发的新手。我有一张看起来像的桌子：

sr.No  Name  Score Action
1      ABC    5     Add
2      PQR    7     Remove

下面的HTML：

    <div class="col-xs-12 col-md-12 nopadding">
        <div class="table-responsive">
            <table class="table table-striped table-bordered col-xs-12 col-lg-12">
                <thead class="text-center text-info text-capitalize">
                    <th class="text-center">Sr.No.</th>
                    <th class="text-center">Name</th>
                    <th class="text-center">Score</th>
                    <th class="text-center">Actions</th>
                </thead>
                 <tbody>
                <tr ng-repeat="file in processResumeFiles">
                    <td class="text-center">{{ file.id}}</td>
                    <td class="view-orphan uploadResumeTableCellOverFlow">
                        {{ file.attributes.name}}
                    </td>
                    <td class="text-center">{{file.totalScore}}</td>
                    <td class="text-center">
                        <button class="btn btn-labeled  btn-info" title="click to see" ng-disabled="!file.attributes.isUploadedDocument" data-ng-click="somemethod($index)">
                            <i class="fa fa-eye" aria-hidden="true"></i>
                        </button>
                        <button class="btn btn-labeled  btn-info" title="click to see" ng-disabled="!file.attributes.isCommitted || !file.attributes.isUploadedDocument" data-ng-click="somemethod(file.attributes.name)">
                            <i class="fa fa-share" aria-hidden="true"></i>
                        </button>
                        <button class="btn btn-labeled  btn-info" title="click to see" data-ng-click="somemethod(file.attributes.name)">
                            <i class="fa fa-trash" aria-hidden="true"></i>
                        </button>
                        <button class="btn btn-labeled  btn-info" title="click to see" ng-disabled="!file.attributes.isCommitted || !file.attributes.isUploadedDocument" data-ng-click="somemethod(file.attributes.name)">
                            <i class="fa fa-sign-out" aria-hidden="true"></i>
                        </button>
                        <button class="btn btn-labeled  btn-info" title="click to see" ng-disabled="!file.attributes.isCommitted || !isjdDeleted || !jdSelected" data-ng-click="somemethod(file.attributes.name)">
                            <i class="fa fa-check-square" aria-hidden="true"></i>
                        </button>
                    </td>
                </tr>
</tbody>
            </table>
        </div>
    </div>

我已经完成了所有解决方案，但我没有找到任何答案。我希望这个表有一个滚动条，标题应该是固定的。

任何人都可以帮我这个吗？

我试过这个 - ＆gt;

table ,tr td{
    border:1px solid red
}
tbody {
    display:block;
    height:200px;
    overflow:auto;
}
thead, tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;/* even columns width , fix width of table too*/
}
thead {
    width: calc( 100% - 1em )/* scrollbar is average 1em/16px width, remove it from thead width */
}
table {
    width:400px;
}

结果为 -

Plunker for this - ＆gt;

Plunker

Answer 1

我认为你在寻找这个？

＆＃13;

        table {
            width: 100%;
        }

        thead, tbody, tr, td, th { display: block; }

        tr:after {
            content: ' ';
            display: block;
            visibility: hidden;
            clear: both;
        }

        thead th {
            height: 30px;

            /*text-align: left;*/
        }

        tbody {
            height: 120px;
            overflow-y: auto;
        }

        thead {
            /* fallback */
        }


        tbody td, thead th {
            width: 19.2%;
            float: left;
        }

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped">
    <thead>
    <tr>
        <th>Make</th>
        <th>Model</th>
        <th>Color</th>
        <th>Year</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
    <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
            <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
     <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
    </tbody>
    
</table>

＆＃13;

Answer 2

使用Bootstrap时，您可以使用 table-fixed CSS类修复标题：

<table class="table-fixed"> ... </table/>

然后，如果你想让表格可滚动，这是一个大问题，有几个解决方案。这是一个建议：

tr {
  width: 100%;
  display: inline-table;
  table-layout: fixed;
}

tbody {
  overflow-y: scroll;
  height: 100px;
  width: 100%;
  position: absolute;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
        <table class="table table-fixed">
          <thead>
              <th class="col-xs-2">#</th>
              <th class="col-xs-8">Name</th>
              <th class="col-xs-2">Points</th>
          </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">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>
  </div>
</div>

将滚动条添加到具有固定标题的表中

2 个答案: