html - Table with fixed thead inside of position:absolute block -
i have html table
wrapped block position:absolute
. want make first row (with th
or td
, or wrapped thead
) fixed @ top, , other table should scrollable, without fixed height.
i've tried this, inside of position:absolute
didn't work:
https://jsfiddle.net/dpixie/byb9d/3/light/
html, body{ margin:0; padding:0; height:100%; } section { position: relative; border: 1px solid #000; padding-top: 37px; background: #500; } section.positioned { position: absolute; top:100px; left:100px; width:800px; box-shadow: 0 0 15px #333; } .container { overflow-y: auto; height: 200px; } table { border-spacing: 0; width:100%; } td + td { border-left:1px solid #eee; } td, th { border-bottom:1px solid #eee; background: #ddd; color: #000; padding: 10px 25px; } th { height: 0; line-height: 0; padding-top: 0; padding-bottom: 0; color: transparent; border: none; white-space: nowrap; } th div{ position: absolute; background: transparent; color: #fff; padding: 9px 25px; top: 0; margin-left: -25px; line-height: normal; border-left: 1px solid #800; } th:first-child div{ border: none; }
<section class=""> <div class="container"> <table> <thead> <tr class="header"> <th> table attribute name <div>table attribute name</div> </th> <th> value <div>value</div> </th> <th> description <div>description</div> </th> </tr> </thead> <tbody> <tr> <td>align</td> <td>left, center, right</td> <td>not supported in html5. deprecated in html 4.01. specifies alignment of table according surrounding text</td> </tr> <tr> <td>bgcolor</td> <td>rgb(x,x,x), #xxxxxx, colorname</td> <td>not supported in html5. deprecated in html 4.01. specifies background color table</td> </tr> <tr> <td>border</td> <td>1,""</td> <td>specifies whether table cells should have borders or not</td> </tr> <tr> <td>cellpadding</td> <td>pixels</td> <td>not supported in html5. specifies space between cell wall , cell content</td> </tr> <tr> <td>cellspacing</td> <td>pixels</td> <td>not supported in html5. specifies space between cells</td> </tr> <tr> <td>frame</td> <td>void, above, below, hsides, lhs, rhs, vsides, box, border</td> <td>not supported in html5. specifies parts of outside borders should visible</td> </tr> <tr> <td>rules</td> <td>none, groups, rows, cols, all</td> <td>not supported in html5. specifies parts of inside borders should visible</td> </tr> <tr> <td>summary</td> <td>text</td> <td>not supported in html5. specifies summary of content of table</td> </tr> <tr> <td>width</td> <td>pixels, %</td> <td>not supported in html5. specifies width of table</td> </tr> </tbody> </table> </div> </section>
Comments
Post a Comment