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

Popular posts from this blog

toolbar - How to add link to user registration inside toobar in admin joomla 3 custom component -

linux - disk space limitation when creating war file -