CSS可滚动表体

时间:2015-12-15 15:40:11

标签: html css

我遇到滚动条显示已禁用的问题。我想要实现的是静态表头(这就是为什么我使用了两个表)和一个可滚动的表体。

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;
}

我该如何解决这个问题?

0 个答案:

没有答案