具有固定位置和滚动表数据元素的HTML表头

时间：2016-11-12 18:02:58

标签： html css scroll html-table fixed-header-tables

这个问题的主要目的是使表头固定，当我们垂直滚动时，只有元素应该滚动，表头应该在同一位置

我想要完成而无需手动修复表头的宽度，因为我的列标题宽度取决于td元素。我看到一些问题，其中解决方案找到使用手动修复宽度表头。

有人可以通过使用相同的CSS类名

帮助我解决这个问题

以下是我桌上的演示。

Demo Of the Table

我用于上表的CSS 

.wrapper {

overflow : auto;
width: 1350px;
max-height : 250px;
white-space: nowrap;
padding-bottom : 10px;
padding-top : 10px;
}
.professional .title {
    padding-top: 10px;
    backgrounionad: #2980b9;
}
td {
white-space: nowrap;
border-style: solid;
padding: 8px;
border-right-color: #ff0000;
}

th {
position:auto;
text-align: center;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
width : auto;
height : word-spacing;
white-space: nowrap;

}

.table {

width: auto;
max-width: auto;
margin-bottom: 20px;
}

.tableheader {

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font-size: 1.3rem;
border-radius: 5px;
text-transform: capitalize;
position: relative;

padding: 10px 25px 10px 25px;
}

5 个答案:

答案 0 :(得分：3)

你可以这样做：

  • 将第一行放在<thead></thead>中，然后添加css position:fixed;
  • 将表格的其余部分放在<tbody></tbody>中，然后添加css top: 3em; position:relative; top之外的值取决于您的字体大小。

如果您没有横向滚动，这将有效。

＆＃13;
＆＃13; 
.wrapper {
    overflow: auto;
    width: 1350px;
    max-height: 250px;
    white-space: nowrap;
    padding-bottom: 10px;
    padding-top: 10px;
}
.professional .title {
    padding-top: 10px;
    background: #2980b9;
}

td {
    white-space: nowrap;
    border-style: solid;
    padding: 8px;
    border-right-color: #ff0000;
}
th {
    position: auto;
    text-align: center;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    width: auto;
    height: word-spacing;
    white-space: nowrap;
}
.table {
    width: auto;
    max-width: auto;
    margin-bottom: 20px;
}
.tableheader {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    font-size: 1.3rem;
    border-radius: 5px;
    text-transform: capitalize;
    position: relative;
    padding: 10px 25px 10px 25px;
}
tbody{
  top:3em;
  position:relative;
}
thead {
  position:fixed;
}
＆＃13; 
<link rel="stylesheet" href="style.css" />
   <body>
      Scrollable Table
      <div class="wrapper">
      
        <table class="professional">
          <thead>
            <tr>
                  <th class="tableheader">Message ID</th>
                  <th class="tableheader">Operation</th>
                  <th class="tableheader">Status</th>
                  <th class="tableheader">Send Time</th>
                  <th class="tableheader">Receive Time</th>
                  <th class="tableheader">Send Data</th>
                  <th class="tableheader">Receive Data</th>
               </tr>
               </thead>
            <tbody>
            
               <!-- ngRepeat: list in opMessageLogs -->
               <tr class="features ng-scope" ng-repeat="list in opMessageLogs">
                  <td class="ng-binding">58231e66982cf7857fee2cb5</td>
                  <td class="ng-binding">Operation1</td>
                  <td class="ng-binding">SUCCESS</td>
                  <td class="ng-binding">null</td>
                  <td class="ng-binding">2016-11-09 18:32:30</td>
                  <td ng-click="showText(list.REQUEST,$index)">Request</td>
                  <td ng-click="showText(list.RESPONSE,$index)">Response</td>
               </tr>
               <!-- end ngRepeat: list in opMessageLogs -->
               <tr class="features ng-scope" ng-repeat="list in opMessageLogs">
                  <td class="ng-binding">58231e681b58b970137b56aa</td>
                  <td class="ng-binding">Operation2</td>
                  <td class="ng-binding">SUCCESS</td>
                  <td class="ng-binding">2016-11-09 18:32:32</td>
                  <td class="ng-binding">2016-11-09 18:32:32</td>
                  <td ng-click="showText(list.REQUEST,$index)">Request</td>
                  <td ng-click="showText(list.RESPONSE,$index)">Response</td>
               </tr>
               <!-- end ngRepeat: list in opMessageLogs -->
               <tr class="features ng-scope" ng-repeat="list in opMessageLogs">
                  <td class="ng-binding">58231e691b58b970137b56ab</td>
                  <td class="ng-binding">Operation3</td>
                  <td class="ng-binding">SUCCESS</td>
                  <td class="ng-binding">2016-11-09 18:32:33</td>
                  <td class="ng-binding">2016-11-09 18:32:33</td>
                  <td ng-click="showText(list.REQUEST,$index)">Request</td>
                  <td ng-click="showText(list.RESPONSE,$index)">Response</td>
               </tr>
               <tr class="features ng-scope" ng-repeat="list in opMessageLogs">
                  <td class="ng-binding">58231e691b58b970137b56ab</td>
                  <td class="ng-binding">Operation3</td>
                  <td class="ng-binding">SUCCESS</td>
                  <td class="ng-binding">2016-11-09 18:32:33</td>
                  <td class="ng-binding">2016-11-09 18:32:33</td>
                  <td ng-click="showText(list.REQUEST,$index)">Request</td>
                  <td ng-click="showText(list.RESPONSE,$index)">Response</td>
               </tr>
               <tr class="features ng-scope" ng-repeat="list in opMessageLogs">
                  <td class="ng-binding">58231e691b58b970137b56ab</td>
                  <td class="ng-binding">Operation3</td>
                  <td class="ng-binding">SUCCESS</td>
                  <td class="ng-binding">2016-11-09 18:32:33</td>
                  <td class="ng-binding">2016-11-09 18:32:33</td>
                  <td ng-click="showText(list.REQUEST,$index)">Request</td>
                  <td ng-click="showText(list.RESPONSE,$index)">Response</td>
               </tr>
               <tr class="features ng-scope" ng-repeat="list in opMessageLogs">
                  <td class="ng-binding">58231e691b58b970137b56ab</td>
                  <td class="ng-binding">Operation3</td>
                  <td class="ng-binding">SUCCESS</td>
                  <td class="ng-binding">2016-11-09 18:32:33</td>
                  <td class="ng-binding">2016-11-09 18:32:33</td>
                  <td ng-click="showText(list.REQUEST,$index)">Request</td>
                  <td ng-click="showText(list.RESPONSE,$index)">Response</td>
               </tr>
               <tr class="features ng-scope" ng-repeat="list in opMessageLogs">
                  <td class="ng-binding">58231e691b58b970137b56ab</td>
                  <td class="ng-binding">Operation3</td>
                  <td class="ng-binding">SUCCESS</td>
                  <td class="ng-binding">2016-11-09 18:32:33</td>
                  <td class="ng-binding">2016-11-09 18:32:33</td>
                  <td ng-click="showText(list.REQUEST,$index)">Request</td>
                  <td ng-click="showText(list.RESPONSE,$index)">Response</td>
               </tr>
               <tr class="features ng-scope" ng-repeat="list in opMessageLogs">
                  <td class="ng-binding">58231e691b58b970137b56ab</td>
                  <td class="ng-binding">Operation3</td>
                  <td class="ng-binding">SUCCESS</td>
                  <td class="ng-binding">2016-11-09 18:32:33</td>
                  <td class="ng-binding">2016-11-09 18:32:33</td>
                  <td ng-click="showText(list.REQUEST,$index)">Request</td>
                  <td ng-click="showText(list.RESPONSE,$index)">Response</td>
               </tr>
               <tr class="features ng-scope" ng-repeat="list in opMessageLogs">
                  <td class="ng-binding">58231e691b58b970137b56ab</td>
                  <td class="ng-binding">Operation3</td>
                  <td class="ng-binding">SUCCESS</td>
                  <td class="ng-binding">2016-11-09 18:32:33</td>
                  <td class="ng-binding">2016-11-09 18:32:33</td>
                  <td ng-click="showText(list.REQUEST,$index)">Request</td>
                  <td ng-click="showText(list.RESPONSE,$index)">Response</td>
               </tr>
               <tr class="features ng-scope" ng-repeat="list in opMessageLogs">
                  <td class="ng-binding">58231e691b58b970137b56ab</td>
                  <td class="ng-binding">Operation3</td>
                  <td class="ng-binding">SUCCESS</td>
                  <td class="ng-binding">2016-11-09 18:32:33</td>
                  <td class="ng-binding">2016-11-09 18:32:33</td>
                  <td ng-click="showText(list.REQUEST,$index)">Request</td>
                  <td ng-click="showText(list.RESPONSE,$index)">Response</td>
               </tr>
               <tr class="features ng-scope" ng-repeat="list in opMessageLogs">
                  <td class="ng-binding">58231e691b58b970137b56ab</td>
                  <td class="ng-binding">Operation3</td>
                  <td class="ng-binding">SUCCESS</td>
                  <td class="ng-binding">2016-11-09 18:32:33</td>
                  <td class="ng-binding">2016-11-09 18:32:33</td>
                  <td ng-click="showText(list.REQUEST,$index)">Request</td>
                  <td ng-click="showText(list.RESPONSE,$index)">Response</td>
               </tr>
               <!-- end ngRepeat: list in opMessageLogs -->
               <tr class="features ng-scope" ng-repeat="list in opMessageLogs">
                  <td class="ng-binding">58231e6d1b58b970137b56ac</td>
                  <td class="ng-binding">Operation4</td>
                  <td class="ng-binding">SUCCESS</td>
                  <td class="ng-binding">2016-11-09 18:32:33</td>
                  <td class="ng-binding">2016-11-09 18:32:37</td>
                  <td ng-click="showText(list.REQUEST,$index)">Request</td>
                  <td ng-click="showText(list.RESPONSE,$index)">Response</td>
               </tr>
               <!-- end ngRepeat: list in opMessageLogs -->
               <tr class="features ng-scope" ng-repeat="list in opMessageLogs">
                  <td class="ng-binding">58231e721b58b970137b56ad</td>
                  <td class="ng-binding">Operation5</td>
                  <td class="ng-binding">FAILURE</td>
                  <td class="ng-binding">2016-11-09 18:32:37</td>
                  <td class="ng-binding">null</td>
                  <td ng-click="showText(list.REQUEST,$index)">Request</td>
                  <td ng-click="showText(list.RESPONSE,$index)">Response</td>
               </tr>
               <!-- end ngRepeat: list in opMessageLogs -->
               <tr class="features ng-scope" ng-repeat="list in opMessageLogs">
                  <td class="ng-binding">58231e731b58b970137b56ae</td>
                  <td class="ng-binding">Operation6</td>
                  <td class="ng-binding">SUCCESS</td>
                  <td class="ng-binding">2016-11-09 18:32:43</td>
                  <td class="ng-binding">2016-11-09 18:32:43</td>
                  <td ng-click="showText(list.REQUEST,$index)">Request</td>
                  <td ng-click="showText(list.RESPONSE,$index)">Response</td>
               </tr>
               <!-- end ngRepeat: list in opMessageLogs -->
               <tr class="features ng-scope" ng-repeat="list in opMessageLogs">
                  <td class="ng-binding">58231e741b58b970137b56af</td>
                  <td class="ng-binding">Operation7</td>
                  <td class="ng-binding">SUCCESS</td>
                  <td class="ng-binding">2016-11-09 18:32:43</td>
                  <td class="ng-binding">2016-11-09 18:32:44</td>
                  <td ng-click="showText(list.REQUEST,$index)">Request</td>
                  <td ng-click="showText(list.RESPONSE,$index)">Response</td>
               </tr>
               <!-- end ngRepeat: list in opMessageLogs -->
               <tr class="features ng-scope" ng-repeat="list in opMessageLogs">
                  <td class="ng-binding">58231e761b58b970137b56b0</td>
                  <td class="ng-binding">Operation8</td>
                  <td class="ng-binding">SUCCESS</td>
                  <td class="ng-binding">2016-11-09 18:32:46</td>
                  <td class="ng-binding">2016-11-09 18:32:46</td>
                  <td ng-click="showText(list.REQUEST,$index)">Request</td>
                  <td ng-click="showText(list.RESPONSE,$index)">Response</td>
               </tr>
               <!-- end ngRepeat: list in opMessageLogs -->
               <tr class="features ng-scope" ng-repeat="list in opMessageLogs">
                  <td class="ng-binding">58231e771b58b970137b56b1</td>
                  <td class="ng-binding">Operation9</td>
                  <td class="ng-binding">SUCCESS</td>
                  <td class="ng-binding">2016-11-09 18:32:46</td>
                  <td class="ng-binding">2016-11-09 18:32:47</td>
                  <td ng-click="showText(list.REQUEST,$index)">Request</td>
                  <td ng-click="showText(list.RESPONSE,$index)">Response</td>
               </tr>
               <!-- end ngRepeat: list in opMessageLogs -->
               <tr class="features ng-scope" ng-repeat="list in opMessageLogs">
                  <td class="ng-binding">58231e781b58b970137b56b2</td>
                  <td class="ng-binding">Operation10</td>
                  <td class="ng-binding">SUCCESS</td>
                  <td class="ng-binding">2016-11-09 18:32:47</td>
                  <td class="ng-binding">2016-11-09 18:32:48</td>
                  <td ng-click="showText(list.REQUEST,$index)">Request</td>
                  <td ng-click="showText(list.RESPONSE,$index)">Response</td>
               </tr>
               <!-- end ngRepeat: list in opMessageLogs -->
               <tr class="features ng-scope" ng-repeat="list in opMessageLogs">
                  <td class="ng-binding">58231e791b58b970137b56b3</td>
                  <td class="ng-binding">Operation11</td>
                  <td class="ng-binding">SUCCESS</td>
                  <td class="ng-binding">2016-11-09 18:32:48</td>
                  <td class="ng-binding">2016-11-09 18:32:49</td>
                  <td ng-click="showText(list.REQUEST,$index)">Request</td>
                  <td ng-click="showText(list.RESPONSE,$index)">Response</td>
               </tr>
               <!-- end ngRepeat: list in opMessageLogs -->
               <tr class="features ng-scope" ng-repeat="list in opMessageLogs">
                  <td class="ng-binding">58231e8d982cf7857fee2cb9</td>
                  <td class="ng-binding">Operation1</td>
                  <td class="ng-binding">SUCCESS</td>
                  <td class="ng-binding">null</td>
                  <td class="ng-binding">2016-11-09 18:33:09</td>
                  <td ng-click="showText(list.REQUEST,$index)">Request</td>
                  <td ng-click="showText(list.RESPONSE,$index)">Response</td>
               </tr>
               <!-- end ngRepeat: list in opMessageLogs -->
               <tr class="features ng-scope" ng-repeat="list in opMessageLogs">
                  <td class="ng-binding">58231e97a782de0c9ea24979</td>
                  <td class="ng-binding">Operation2</td>
                  <td class="ng-binding">SUCCESS</td>
                  <td class="ng-binding">2016-11-09 18:33:19</td>
                  <td class="ng-binding">2016-11-09 18:33:19</td>
                  <td ng-click="showText(list.REQUEST,$index)">Request</td>
                  <td ng-click="showText(list.RESPONSE,$index)">Response</td>
               </tr>
               <!-- end ngRepeat: list in opMessageLogs -->
            </tbody>
         </table>
      </div>
   </body>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：2)

试试这段代码：

 // Calling async task to fetch data from DB
   new waitAsync (context).execute();

.container{
  width:100%;
  height:150px;
  overflow:auto;
}
td{
border:1px solid;
}
.header{
  width:calc(100% - 17px);
  width:-webkit-calc(100% - 17px);
  width:-moz-calc(100% - 17px);
 height:25px; 
 background:#000;color:#fff;
}

答案 2 :(得分：1)

如果你想要的是匹配你的标题宽度，你的td元素的宽度，你可以使用javascript offsetWidth。 这将为您提供td元素的宽度。因此，您可以使用修复表格标题的宽度来查看答案。

如果您不想使用javascript，也许这会对您有所帮助：

    .wrapper {
        display:inline-block;
        position:relative;
    }
    .tableheader{
        display:block;
    }
    .tablebody{
        display:block;
        overflow-y:scroll;
        max-height:80px;
    }
    .ng-binding{
        display:block;
    }
<div class="wrapper">
    <div class="tableheader">
        Message ID
    </div>
    <div class="tablebody">
        <div class="ng-binding">
            58231e66982cf7857fee2cb5
        </div>
        <div class="ng-binding">
            58231e66982cf7857fee2cb5
        </div>
        <div class="ng-binding">
            58231e66982cf7857fee2cb5
        </div>
        <div class="ng-binding">
            58231e66982cf7857fee2cb5
        </div>
        <div class="ng-binding">
            58231e66982cf7857fee2cb5
        </div>
        <div class="ng-binding">
            58231e66982cf7857fee2cb5
        </div>
        <div class="ng-binding">
            58231e66982cf7857fee2cb5
        </div>
        <div class="ng-binding">
            58231e66982cf7857fee2cb5
        </div>
    </div>
</div>
<div class="wrapper">
    <div class="tableheader">
        Operation
    </div>
    <div class="tablebody">
        <div class="ng-binding">
            Operation1
        </div>
        <div class="ng-binding">
            Operation2
        </div>
        <div class="ng-binding">
            Operation3
        </div>
        <div class="ng-binding">
            Operation11
        </div>
        <div class="ng-binding">
            5Operation12
        </div>
        <div class="ng-binding">
            Operation13
        </div>
        <div class="ng-binding">
            Operation14
        </div>
        <div class="ng-binding">
            Operation15
        </div>
    </div>
</div>

答案 3 :(得分：0)

您可以做的是，不是使用表格行作为标题，而是创建<div>元素并将其设置为位于屏幕顶部

#tableheader {
    position:fixed;
    top:0;
    width:100%;
    z-index:100;
}

然后你可以把一个表元素放在它下面。

<div id="tableheader">
Table title
</div>
<table>
    <tr>
        <td>Data</td>
        <td>More Data</td>
    </tr>
</table>

答案 4 :(得分：-2)

最后我最终手动固定了桌子宽度，但是我在这里做了一些事情，让它按照我想要的方式工作。

最初我手动找到了最大单元格内容的宽度。没有触摸CSS我覆盖了HTML本身的宽度，如下所示。

因为在我的实际应用中我使用的是ng-repeat，所以我不需要在每行中手动添加这些。

任何改进/建议总是被接受：）

style="width : 183px !important;"

<强> Working Demo

注意：请在放大窗口中查看演示，如下所示

enter image description here

我的应用HTML使用Ng-Repeat 

<div>
            <!--, From the local table,-->
            <table class="professional">
                <tbody>
                    <thead>
                        <tr>

                            <th class="tableheader" style="width : 183px !important;">Message ID</th>
                            <th class="tableheader" style="width : 353px !important;">Operation</th>
                            <th class="tableheader" style="width : 88px !important;">Status</th>
                            <th class="tableheader" style="width : 153px !important;">Account Number</th>
                            <th class="tableheader" style="width : 130px !important;">Send Time</th>
                            <th class="tableheader" style="width : 130px !important;">Receive Time</th>
                            <th class="tableheader" style="width : 113px !important;">Send Data</th>
                            <th class="tableheader" style="width : 128px !important;">Receive Data</th>

                        </tr>
                    </thead>
                </tbody>
            </table>
        </div>
        <div class="wrapper">
            <table class="professional">
                <tbody>

                    <tr class="features" ng-repeat="list in mesaages">
                        <td style="width : 183px !important;">{{list._id.$id}}</td>
                        <td style="width : 353px !important;">{{list.OPERATION}}</td>
                        <td style="width : 88px !important;">{{list.STATUS}}</td>
                        <td style="width : 153px !important;">{{list.ACCOUNTNUMBER}}</td>
                        <td style="width : 130px !important;">{{list.SENDTIME.sec * 1000 | date:'yyyy-MM-dd HH:mm:ss'}}</td>
                        <td  style="width : 130px !important;">{{list.RECEIVETIME.sec * 1000 | date:'yyyy-MM-dd HH:mm:ss'}}</td>
                        <td ng-click="showText(list.REQUEST,$index)" style="width : 113px !important;"><a style="cursor: pointer;">Request</a></td>
                        <td ng-click="showText(list.RESPONSE,$index)" style="width : 128px !important;"><a style="cursor: pointer;">Response</a></td>
                    </tr>

                </tbody>

            </table>
        </div>
相关问题
最新问题