表頭不固定，雖然使用的位置：絕對

我想表表頭 - 保持固定，而下面的行 - 應該能夠滾動。嘗試位置後：絕對它在表中我的標題寬度。當然，我錯過了一些東西，而我是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

表頭不固定，雖然使用的位置：絕對

回答

相關問題