设置表格高度似乎改为添加边距顶部

Question

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

你可以在这里看到我在说什么：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

你不能在 tbody 周围放置 div，在桌子周围移动它，你的桌子就会滚动

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

编辑

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

要修复标题，您必须为标题添加绝对位置并固定其高度。你的桌子的其余部分会上升，所以为这个高度值添加一个 padding-top 到周围的 div 来修复它。还要添加背景以隐藏下方的滚动内容。

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

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