设置 table 高度似乎改为添加 margin-top

Question

我正在尝试制作一个可滚动的 table，高度设置为 table。但是，当我尝试设置高度时，它会在 table 顶部添加边距，而不是调整实际 table 的高度。我只希望 table 滚动（不是它上面的日期）并最终希望使列标题具有粘性。

你可以在这里看到我在说什么：http://jsfiddle.net/m5s87hb0/

这是我的 html:

<div class='box-style-1' id='timesheet-box'>
<span class='box-title'>Time Sheet<span>
<div id='table-wrapper'>
    <table id='timesheet'>
        <thead>
            <th id='timesheet-date' colspan="5">00/00/0000 - 00/00/0000</th>
        </thead>
        <div id='table-scroll'>
            <tbody>
                <tr id='col-titles'>
                    <th>Jobs</th>
                    <th>Task</th>
                    <th>In</th>
                    <th>Out</th>
                    <th>Hours</th>
                </tr>
                <tr>
                    <td>Job 1</td>
                    <td>Task 1</td>
                    <td>00:00</td>
                    <td>00:00</td>
                    <td>0</td>
                </tr>
                <tr>
                    <td>Job 2</td>
                    <td>Task 2</td>
                    <td>00:00</td>
                    <td>00:00</td>
                    <td>0</td>
                </tr>
                <tr>
                    <td>Job 3</td>
                    <td>Task 3</td>
                    <td>00:00</td>
                    <td>00:00</td>
                    <td>0</td>
                </tr>
                <tr>
                    <td>Job 4</td>
                    <td>Task 4</td>
                    <td>00:00</td>
                    <td>00:00</td>
                    <td>0</td>
                </tr>
                <tr>
                    <td>Job 5</td>
                    <td>Task 5</td>
                    <td>00:00</td>
                    <td>00:00</td>
                    <td>0</td>
                </tr>
            </tbody>
        </div>
    </table>    
</div>
</div>

Css:

.box-style-1 {
    clear: both;
    position: absolute;
    display: block;
    border: 1px solid black;
    border-radius: 10px;
    white-space: nowrap;
    background: #D1D3D4;
    overflow: hidden;
}
.box-title {
    display: block;
    background: #D15F32;
    padding: 0px;
    border-radius: 10px 10px 0px 0px;
    text-align: center;
    font-weight: ;
    color: #fff;
    font-size: 25px;
    margin-bottom: 0px;
    height: 40px;
    padding-top: 10px;
}
#timesheet-box {
    width: 78%;
    height: 300px;
    position: absolute;
    display: block;
    margin-left: 7%;
}
#table-wrapper {
    position: relative;
    height: 250px;
}
#timesheet {
    width: 100%;
    margin-top: 10px;
    color: #3a3a3c;
    height: 100%;
}
#timesheet-date {
    padding: 0px;
    margin-top: 50px;
}
#table-scroll {
    position: relative;
    display: block;
    height: 100px;
    overflow: scroll;
}
tbody {

}
th, td {
   border: 1px solid #3a3a3c;
   font-style: normal;
   font-size: 22px;
   height: 40px;
}
table {
    border-collapse: collapse;
}

Answer 1

你不能让 div 围绕 tbody，将它移动到 table 周围，你的 table 就会滚动

<div id='table-scroll'>
  <table id='timesheet'>
    ...
  </table>
</div>

编辑

http://codepen.io/anon/pen/VLmqbK

要固定 header，您必须将绝对位置添加到 header 并固定其高度。您的 table 的其余部分将上升，因此在 div 周围添加一个 padding-top 以修复此高度值。还添加背景以隐藏下方的滚动内容。

thead {
  position:absolute;
  top:0px;
  height:40px;
  background:white;
}
#table-scroll {
  display: block;
  height: 200px;
  overflow-y: scroll;
  padding-top:23px; /* I don't know where the 17 other px come from in your code but who cares :) */
}

Answer 2

我通过将日期移出 table 解决了这个问题。

设置 table 高度似乎改为添加 margin-top

Setting table height appears to adds margin-top instead

html

css

scroll

html-table