Scrollable table contents html/css -


i'm trying make table contents scrollable, i've had create table inside 1 of table rows means if table has more 1 row contents isn't aligned correct heading showing in fiddle;

https://jsfiddle.net/f5ax5w2r/

thead.panel-heading {      background-color: #242a30;      border-color: #242a30;      border-bottom: 1px solid #242a30;      border-top-left-radius: 3px;      border-top-right-radius: 3px;      cursor: move;      width: 100%;  }  thead.panel-heading tr th {      color: #ffffff;      font-weight: 500;      padding: 10px 40px !important;      text-align: left;  }  tbody.panel-content {      background-color: #f0f3f4;  }  tbody.panel-content tr td {      padding: 10px 20px !important;      text-align: left;  }  tbody div {      overflow-x: hidden;      overflow-y: scroll;      height: 300px;  }
<table>      <thead class="panel-heading">          <tr>              <th>client</th>              <th>client</th>          </tr>      </thead>      <tbody class="panel-content">          <tr>              <td>                  <div class="scrollit">                      <table>                          <tr>                              <td>alex best</td>                              <td>yahoo answers</td>                          </tr>                          <tr>                              <td>andrew smith</td>                              <td>monkey tube</td>                          </tr>                          <tr>                              <td>james harris</td>                              <td>limewire</td>                          </tr>                          <tr>                              <td>mike anderson</td>                              <td>twitter</td>                          </tr>                      </table>                  </div>              </td>          </tr>      </tbody>  </table>

the number of table cells not match in each table row in code. adding correct colspan value should it.

thead.panel-heading {      background-color: #242a30;      border-color: #242a30;      border-bottom: 1px solid #242a30;      border-top-left-radius: 3px;      border-top-right-radius: 3px;      cursor: move;      width: 100%;  }  thead.panel-heading tr th {      color: #ffffff;      font-weight: 500;      padding: 10px 40px !important;      text-align: left;  }  tbody.panel-content {      background-color: #f0f3f4;  }  tbody.panel-content tr td {      padding: 10px 20px !important;      text-align: left;  }  tbody div {      overflow-x: hidden;      overflow-y: scroll;      height: 300px;  }
<table>      <thead class="panel-heading">          <tr>              <th>client</th>              <th>client</th>          </tr>      </thead>      <tbody class="panel-content">          <tr>              <td colspan="2">                  <div class="scrollit">                      <table>                          <tr>                              <td>alex best</td>                              <td>yahoo answers</td>                          </tr>                          <tr>                              <td>andrew smith</td>                              <td>monkey tube</td>                          </tr>                          <tr>                              <td>james harris</td>                              <td>limewire</td>                          </tr>                          <tr>                              <td>mike anderson</td>                              <td>twitter</td>                          </tr>                      </table>                  </div>              </td>          </tr>      </tbody>  </table>


Comments

Popular posts from this blog

asp.net mvc - SSO between MVCForum and Umbraco7 -

Python Tkinter keyboard using bind -

ubuntu - Selenium Node Not Connecting to Hub, Not Opening Port -