【发布时间】：2019-05-31 12:28:14
【问题描述】：
我试图让 HTML 表格的左第一列始终显示，即使用户向右滚动。
我正在尝试根据我的需要调整在此线程 how do I create an HTML table with fixed/frozen left column and scrollable body? 上找到的解决方案。
您可以在下面找到一个功能示例。我需要帮助的是能够将第一列定位在与 div 类“sectionContainer”相同的位置。此时它在整个窗口的最左侧（似乎绝对定位适用于body标签而不是父div）。
.sectionContainer {
margin: 100px;
}
.tableContainer {
width: 500px;
overflow-x: scroll;
margin-left: 110px;
overflow-y: visible;
padding: 0;
}
.firstColumn {
position: absolute;
width: 90px;
left: 0;
border: none !important;
}<div class="sectionContainer">
<div class="tableContainer">
<table class="table table-bordered" id="gantt">
<thead>
<tr>
<th class="firstColumn"></th>
<th colspan="2">12am</th>
<th colspan="2">1am</th>
<th colspan="2">2am</th>
<th colspan="2">3am</th>
<th colspan="2">4am</th>
<th colspan="2">5am</th>
<th colspan="2">6am</th>
<th colspan="2">7am</th>
<th colspan="2">8am</th>
<th colspan="2">9am</th>
<th colspan="2">10am</th>
<th colspan="2">11am</th>
<th colspan="2">12pm</th>
<th colspan="2">1pm</th>
</tr>
<tr>
<th class="firstColumn"></th>
<th>00</th>
<th>30</th>
<th>00</th>
<th>30</th>
<th>00</th>
<th>30</th>
<th>00</th>
<th>30</th>
<th>00</th>
<th>30</th>
<th>00</th>
<th>30</th>
<th>00</th>
<th>30</th>
<th>00</th>
<th>00</th>
<th>30</th>
<th>00</th>
<th>30</th>
<th>00</th>
<th>30</th>
<th>00</th>
<th>30</th>
<th>00</th>
<th>30</th>
<th>00</th>
<th>30</th>
<th>00</th>
</tr>
</thead>
<tbody>
<tr data-crew="1552">
<th class="firstColumn">Col1</th>
<td class="empty" data-time="0" data-datetime="2019-01-04 12:00am"> </td>
<td class="empty" data-time="1" data-datetime="2019-01-04 12:30am"> </td>
<td class="empty" data-time="2" data-datetime="2019-01-04 1:00am"> </td>
<td class="empty" data-time="3" data-datetime="2019-01-04 1:30am"> </td>
<td class="empty" data-time="4" data-datetime="2019-01-04 2:00am"> </td>
<td class="empty" data-time="5" data-datetime="2019-01-04 2:30am"> </td>
<td class="empty" data-time="6" data-datetime="2019-01-04 3:00am"> </td>
<td class="empty" data-time="7" data-datetime="2019-01-04 3:30am"> </td>
<td class="empty" data-time="8" data-datetime="2019-01-04 4:00am"> </td>
<td class="empty" data-time="9" data-datetime="2019-01-04 4:30am"> </td>
<td class="empty" data-time="10" data-datetime="2019-01-04 5:00am"> </td>
<td class="empty" data-time="11" data-datetime="2019-01-04 5:30am"> </td>
<td class="empty" data-time="12" data-datetime="2019-01-04 6:00am"> </td>
<td class="empty" data-time="13" data-datetime="2019-01-04 6:30am"> </td>
<td class="empty" data-time="14" data-datetime="2019-01-04 7:00am"> </td>
<td class="empty" data-time="15" data-datetime="2019-01-04 7:30am"> </td>
<td class="empty" data-time="16" data-datetime="2019-01-04 8:00am"> </td>
<td class="empty" data-time="17" data-datetime="2019-01-04 8:30am"> </td>
<td class="empty" data-time="18" data-datetime="2019-01-04 9:00am"> </td>
<td class="empty" data-time="19" data-datetime="2019-01-04 9:30am"> </td>
<td class="empty" data-time="20" data-datetime="2019-01-04 10:00am"> </td>
<td class="empty" data-time="21" data-datetime="2019-01-04 10:30am"> </td>
<td class="empty" data-time="22" data-datetime="2019-01-04 11:00am"> </td>
<td class="empty" data-time="23" data-datetime="2019-01-04 11:30am"> </td>
<td class="empty" data-time="24" data-datetime="2019-01-04 12:00pm"> </td>
<td class="empty" data-time="25" data-datetime="2019-01-04 12:30pm"> </td>
<td class="empty" data-time="26" data-datetime="2019-01-04 1:00pm"> </td>
<td class="empty" data-time="27" data-datetime="2019-01-04 1:30pm"> </td>
</tr>
<tr data-crew="1551">
<th class="firstColumn">Col2</th>
<td class="empty" data-time="0" data-datetime="2019-01-04 12:00am"> </td>
<td class="empty" data-time="1" data-datetime="2019-01-04 12:30am"> </td>
<td class="empty" data-time="2" data-datetime="2019-01-04 1:00am"> </td>
<td class="empty" data-time="3" data-datetime="2019-01-04 1:30am"> </td>
<td class="empty" data-time="4" data-datetime="2019-01-04 2:00am"> </td>
<td class="empty" data-time="5" data-datetime="2019-01-04 2:30am"> </td>
<td class="empty" data-time="6" data-datetime="2019-01-04 3:00am"> </td>
<td class="empty" data-time="7" data-datetime="2019-01-04 3:30am"> </td>
<td class="empty" data-time="8" data-datetime="2019-01-04 4:00am"> </td>
<td class="empty" data-time="9" data-datetime="2019-01-04 4:30am"> </td>
<td class="empty" data-time="10" data-datetime="2019-01-04 5:00am"> </td>
<td class="empty" data-time="11" data-datetime="2019-01-04 5:30am"> </td>
<td class="empty" data-time="12" data-datetime="2019-01-04 6:00am"> </td>
<td class="empty" data-time="13" data-datetime="2019-01-04 6:30am"> </td>
<td class="empty" data-time="14" data-datetime="2019-01-04 7:00am"> </td>
<td class="empty" data-time="15" data-datetime="2019-01-04 7:30am"> </td>
<td class="empty" data-time="16" data-datetime="2019-01-04 8:00am"> </td>
<td class="empty" data-time="17" data-datetime="2019-01-04 8:30am"> </td>
<td class="empty" data-time="18" data-datetime="2019-01-04 9:00am"> </td>
<td class="empty" data-time="19" data-datetime="2019-01-04 9:30am"> </td>
<td class="empty" data-time="20" data-datetime="2019-01-04 10:00am"> </td>
<td class="empty" data-time="21" data-datetime="2019-01-04 10:30am"> </td>
<td class="empty" data-time="22" data-datetime="2019-01-04 11:00am"> </td>
<td class="empty" data-time="23" data-datetime="2019-01-04 11:30am"> </td>
<td class="empty" data-time="24" data-datetime="2019-01-04 12:00pm"> </td>
<td class="empty" data-time="25" data-datetime="2019-01-04 12:30pm"> </td>
<td class="empty" data-time="26" data-datetime="2019-01-04 1:00pm"> </td>
<td class="empty" data-time="27" data-datetime="2019-01-04 1:30pm"> </td>
</tr>
</tbody>
</table>
</div>
</div>【问题讨论】：
-
您能否删除一些
<td>标签，使您的代码更像是一个最小的、完整的示例？它会让其他人更容易理解/滚动浏览。