0

I have the problem that the scroll bar appears disabled. What I want to achieve is static table header (that is why I used two tables) and a scrollable table body.

HTML:

<div id="segment-content">
  <div class="table-header">
    <table>
      <thead>
        <tr class="font-readable">
          <th class="hashtag" align="center">#</th>
          <th class="in">In</th>
          <th class="out">Out</th>
          <th class="duration">Duration</th>
          <th class="filename">Filename</th>
          <th class="unset">Unset</th>
          <th class="preview">Preview</th>
          <th class="public">Public</th>
         </tr>
        </thead>
      </table>
    </div>
    <div class="table-body">
      <table>
        <tbody>
          <tr class="font-readable">
            <td class="hashtag">1</td>
            <td class="in">10-10-2015 11:11:00</td>
            <td class="out">10-10-2015 11:11:00</td>
            <td class="duration">1800 seg</td>
            <td class="filename">10-10-2015-11-11-00-10-10-2015-11-1200.mp4</td>    <td class="unset">Unset</td>
            <td class="preview">Preview</td>
            <td class="public">Public</td>
          </tr>
          <tr class="font-readable">
            <td class="hashtag">2</td>
            <td class="in">10-10-2015 11:11:00</td>
            <td class="out">10-10-2015 11:11:00</td>
            <td class="duration">1800 seg</td>
            <td class="filename">10-10-2015-11-11-00-10-10-2015-11-12-00.mp4</td>
            <td class="unset">Unset</td>
            <td class="preview">Preview</td>
            <td class="public">Public</td>
          </tr>
        </tbody>
      </table>  
    </div>  
  </div>        
</div>

CSS

#segment-content {
  /*margin-top: 455px;*/
  margin-top: 470px;
  margin-left: 65px;
  margin-right: 65px;
  background: #1F1F1F;
}

.table-body {
  overflow-y: scroll;
  height: 100%;
}

table {
  width: 100%;
}

.font-readable {
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 11px;
  font-weight: bold;
  text-align: center;
}

.hashtag {
  width: 20px;
}

.in, .out {
  width: 200px;
}

.duration {
  width: 100px;
}

.filename {
  width: 400px;
}

how can i fix this?

Limon
  • 1,772
  • 7
  • 32
  • 61
  • I think your question is answered in [this post](http://stackoverflow.com/questions/17067294/html-table-with-100-width-with-vertical-scroll-inside-tbody) – DJS Dec 15 '15 at 15:47
  • @DJS it was usefull.. but how do I make an automatic height size? it's not working with height: 100% – Limon Dec 15 '15 at 16:07
  • First, dont use two table, if you want o overflow-y to works on tbody, on must set a height using css. If you want a height that use the x lines, then use jquery. – Bipbip Dec 15 '15 at 16:13

0 Answers0