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

要修复标题，必须在标题中添加绝对位置并修复其高度。你的桌子的其余部分会上升，所以在这个高度值的周围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

我通过将日期移出表格来解决问题。

设置表高度似乎会增加margin-top

2 个答案: