表头不固定，虽然使用的位置：绝对

我想表表头 - 保持固定，而下面的行 - 应该能够滚动。尝试位置后：绝对它在表中我的标题宽度。当然，我错过了一些东西，而我是CSS的新手，所以它会让它变得更加艰难。表头不固定，虽然使用的位置：绝对

此外，我不想水平滚动，内容必须符合规定的宽度（响应），由于行的高度增加是可以忍受的

HTML

<span class="d-body"> 
    <table> 
     <thead> 
     <tr> 
      <th><input type="checkbox"/></th> 
      <th> Date </th> 
      <th> Category </th> 
      <th> Details </th> 
      <th> Amount </th> 
      <th> Action </th> 
     </tr> 
     </thead> 

     <tbody> 
     <tr> 
      <td><input type="checkbox"/></td> 
      <td> 09-05-2015 </td> 
      <td> Household Shopping </td> 
      <td> Blah Blah........................................................................................... </td> 
      <td> 9999 </td> 
      <td> Edit </td> 
     </tr> 
     <tr> 
      <td><input type="checkbox"/></td> 
      <td> 09-05-2015 </td> 
      <td> Household Shopping </td> 
      <td> Blah Blah........................................................................................... </td> 
      <td> 9999 </td> 
      <td> Edit </td> 
     </tr> 
     <tr> 
      <td><input type="checkbox"/></td> 
      <td> 09-05-2015 </td> 
      <td> Household Shopping </td> 
      <td> Blah Blah........................................................................................... </td> 
      <td> 9999 </td> 
      <td> Edit </td> 
     </tr> 
     <tr> 
      <td><input type="checkbox"/></td> 
      <td> 09-05-2015 </td> 
      <td> Household Shopping </td> 
      <td> Blah Blah........................................................................................... </td> 
      <td> 9999 </td> 
      <td> Edit </td> 
     </tr> 
     <tr> 
      <td><input type="checkbox"/></td> 
      <td> 09-05-2015 </td> 
      <td> Household Shopping </td> 
      <td> Blah Blah........................................................................................... </td> 
      <td> 9999 </td> 
      <td> Edit </td> 
     </tr> 
     <tr> 
      <td><input type="checkbox"/></td> 
      <td> 09-05-2015 </td> 
      <td> Household Shopping </td> 
      <td> Blah Blah........................................................................................... </td> 
      <td> 9999 </td> 
      <td> Edit </td> 
     </tr> 
     <tr> 
      <td><input type="checkbox"/></td> 
      <td> 09-05-2015 </td> 
      <td> Household Shopping </td> 
      <td> Blah Blah........................................................................................... </td> 
      <td> 9999 </td> 
      <td> Edit </td> 
     </tr> 
     <tr> 
      <td><input type="checkbox"/></td> 
      <td> 09-05-2015 </td> 
      <td> Household Shopping </td> 
      <td> Blah Blah.................................................................................................................. </td> 
      <td> 9999 </td> 
      <td> Edit </td> 
     </tr> 
     </tbody> 

    </table> 
</span>

css

.d-body { 
    display:block; 
    width:100%; 
    position:relative; 
    text-align:left; 
    margin-bottom:15px; 
    max-height:300px; 
    overflow:auto; 
    background:#e6e6e6; 
} 
.d-body table { 
    border-collapse:collapse; 
    width:100%; 
} 

.d-body thead tr { 
    border-bottom:2px solid #2b2937; 
    width:100%; 
    background:#EDEDED; 
} 
.d-body thead tr:nth-child(1) { 
    background:#009A9C; 
    margin:0; 
    color:#f2f2f2; 
} 

.d-body th, .d-body td { 
    padding:10px 5px; 
    text-align:left; 
} 

.d-body table thead { 
    /*position:absolute;*/ 
    z-index:2; 
}

任何人都可以帮忙吗？

来源

2015-05-09 divy3993

对不起 - 我意识到为时已晚，该宽度正在崩溃所以我返工我的回答解决这个问题 – wunth

我相信在HTML或CSS中内置解决方案是没有的。建议你为表格一个数据和一个表头。并根据第二个表更改单元格的大小。

你也可以尝试一些其他在互联网上可用的框架。

来源

2015-05-09 04:58:58

我看到维持宽度的唯一方法是在它们之间添加跨度，这将会应用父母的宽度并将这些位置固定。隐藏头部并添加另一个元素来欺骗它，这也将固定位置。

http://jsfiddle.net/ntk8a7tt/

HTML

<span class="d-body"> 
    <span class="th-bg"></span> 
<table> 
     <thead> 
     <tr> 
      <th><span><input type="checkbox"/></span></th> 
      <th><span>Date</span></th> 
      <th><span>Category</span></th> 
      <th><span>Details</span></th> 
      <th><span>Amount</span></th> 
      <th><span>Action</span></th> 
     </tr> 
     </thead> 

     <tbody> 
     <tr> 
      <td><input type="checkbox"/></td> 
      <td> 09-05-2015 </td> 
      <td> Household Shopping </td> 
      <td> Blah Blah........................................................................................... </td> 
      <td> 9999 </td> 
      <td> Edit </td> 
     </tr> 
     <tr> 
      <td><input type="checkbox"/></td> 
      <td> 09-05-2015 </td> 
      <td> Household Shopping </td> 
      <td> Blah Blah........................................................................................... </td> 
      <td> 9999 </td> 
      <td> Edit </td> 
     </tr> 
     <tr> 
      <td><input type="checkbox"/></td> 
      <td> 09-05-2015 </td> 
      <td> Household Shopping </td> 
      <td> Blah Blah........................................................................................... </td> 
      <td> 9999 </td> 
      <td> Edit </td> 
     </tr> 
     <tr> 
      <td><input type="checkbox"/></td> 
      <td> 09-05-2015 </td> 
      <td> Household Shopping </td> 
      <td> Blah Blah........................................................................................... </td> 
      <td> 9999 </td> 
      <td> Edit </td> 
     </tr> 
     <tr> 
      <td><input type="checkbox"/></td> 
      <td> 09-05-2015 </td> 
      <td> Household Shopping </td> 
      <td> Blah Blah........................................................................................... </td> 
      <td> 9999 </td> 
      <td> Edit </td> 
     </tr> 
     <tr> 
      <td><input type="checkbox"/></td> 
      <td> 09-05-2015 </td> 
      <td> Household Shopping </td> 
      <td> Blah Blah........................................................................................... </td> 
      <td> 9999 </td> 
      <td> Edit </td> 
     </tr> 
     <tr> 
      <td><input type="checkbox"/></td> 
      <td> 09-05-2015 </td> 
      <td> Household Shopping </td> 
      <td> Blah Blah........................................................................................... </td> 
      <td> 9999 </td> 
      <td> Edit </td> 
     </tr> 
     <tr> 
      <td><input type="checkbox"/></td> 
      <td> 09-05-2015 </td> 
      <td> Household Shopping </td> 
      <td> Blah Blah.................................................................................................................. </td> 
      <td> 9999 </td> 
      <td> Edit </td> 
     </tr> 
     </tbody> 

    </table> 
</span>

CSS

.d-body { 
    display:block; 
    width:100%; 
    position:relative; 
    text-align:left; 
    margin-bottom:15px; 
    max-height:300px; 
    overflow:auto; 
    background:#e6e6e6; 
} 
.d-body table { 
    border-collapse:collapse; 
    width:100%; 
    margin-top: 2.4em; 
} 
.d-body input[type=checkbox] { 
    transform:scale(1.18); 
} 
.d-body thead tr { 
    width:100%; 
    background:#EDEDED; 
} 
.d-body thead tr:nth-child(1) { 
    margin:0; 
    color:#f2f2f2; 
} 
.d-body th, .d-body td { 
    padding:10px 5px; 
    text-align:left; 
} 
.d-body tr:hover { 
    background:#ddd; 
} 
.d-body th { 
    padding: 0; 
} 
.d-body table thead tr { 
    height: 1px; 
} 
tr span { 
    position: fixed; 
    margin-top: -1.6em; 
z-index: 11; 

} 
.th-bg { 
    height: 2.4em; 
    position: fixed; 
    background:#009A9C; 
    display: block; 
    width: 10 .d-body { 
    display:block; 
    width:100%; 
    position:relative; 
    text-align:left; 
    margin-bottom:15px; 
    max-height:300px; 
    overflow:auto; 
    background:#e6e6e6; 
} 
.d-body table { 
    border-collapse:collapse; 
    width:100%; 
    margin-top: 2.4em; 
} 
.d-body input[type=checkbox] { 
    transform:scale(1.18); 
} 
.d-body thead tr { 
    width:100%; 
    background:#EDEDED; 
} 
.d-body thead tr:nth-child(1) { 
    margin:0; 
    color:#f2f2f2; 
} 
.d-body th, .d-body td { 
    padding:10px 5px; 
    text-align:left; 
} 
.d-body tr:hover { 
    background:#ddd; 
} 
.d-body th { 
    padding: 0; 
} 
.d-body table thead tr { 
    height: 1px; 
} 
tr span { 
    position: fixed; 
    margin-top: -1.6em; 
z-index: 11; 

} 
.th-bg { 
    height: 2.4em; 
    position: fixed; 
    background:#009A9C; 
    display: block; 
    width: 100%; 
    z-index: 10; 
    border-bottom:2px solid #2b2937; 
} 
0%; 
    z-index: 10; 
    border-bottom:2px solid #2b2937; 
}

来源

2015-05-09 05:08:09 wunth

很抱歉，此因为表头的列和表格行没有遵循格式。 – divy3993

@ divy3993我意识到这是没用的，所以我已经完全修改了答案，并希望这个帮助。 – wunth

只需添加.header-1类在第一tr

我把下面.header-1类CSS：

.header-1 
    { 
    position:fixed; 
    z-index:1; 

    }

我希望它为你工作

演示：jsfidle

来源

2015-05-09 05:45:47

表头不固定，虽然使用的位置：绝对

回答

相关问题