javascript - How can I keep this table header fixed? -


i'd keep table header fixed, problem when set thead position fixed loses size. basically, want keep thead moving rest of table original shape , size.

thanks in advance.

table {    margin: 100 0 100 0;    width: 100%;  }  th,  td,  table {    /*word-wrap: break-word;*/    border: 1px solid black;    border-radius: 3px;  }  body {    overflow: hidden;  }  .scrollable {    height: 100%;    display: flex;    flex-direction: column;    overflow-y: scroll;  }  thead {    position: fixed;    width: 100%;  }  .myhead {    width: auto;    border: 11px solid blue;  }
<!doctype html>  <html>    <head>    <title>mytable</title>  </head>    <body>    <div class="scrollable">      <table>          <thead>            <tr class="myhead">            <th class="header" align="center">title</th>            <th class="header" align="center">title</th>          </tr>          </thead>          <tbody>          <tr>            <td align="center">id</td>            <td align="center">id</td>          </tr>          <tr>            <td align="center">id</td>            <td align="center">id</td>          </tr>          <tr>            <td align="center">id</td>            <td align="center">id</td>          </tr>          <tr>            <td align="center">id</td>            <td align="center">id</td>          </tr>          <tr>            <td align="center">id</td>            <td align="center">id</td>          </tr>          <tr>            <td align="center">id</td>            <td align="center">id</td>          </tr>          <tr>            <td align="center">id</td>            <td align="center">id</td>          </tr>          <tr>            <td align="center">id</td>            <td align="center">id</td>          </tr>          <tr>            <td align="center">id</td>            <td align="center">id</td>          </tr>          <tr>            <td align="center">id</td>            <td align="center">id</td>          </tr>          <tr>            <td align="center">id</td>            <td align="center">id</td>          </tr>          </tbody>      </table>    </div>    <div>----------------200px--------------></div>  </body>    </html>

check out question provides several resources may solve problem: freeze top row html table (fixed table header scrolling)

(couldn't post comment because don't have required reputation)


Comments

Popular posts from this blog

Rendering JButton to get the JCheckBox behavior in a JTable by using images does not update my table -

javascript - Using jquery append to add option values into a select element not working -

Android soft keyboard reverts to default keyboard on orientation change -