html - 表第一列绝对父级

标签 html css

我试图让 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">&nbsp;</td>
    <td class="empty" data-time="1" data-datetime="2019-01-04 12:30am">&nbsp;</td>
    <td class="empty" data-time="2" data-datetime="2019-01-04 1:00am">&nbsp;</td>

    <td class="empty" data-time="3" data-datetime="2019-01-04 1:30am">&nbsp;</td>

    <td class="empty" data-time="4" data-datetime="2019-01-04 2:00am">&nbsp;</td>

    <td class="empty" data-time="5" data-datetime="2019-01-04 2:30am">&nbsp;</td>

    <td class="empty" data-time="6" data-datetime="2019-01-04 3:00am">&nbsp;</td>

    <td class="empty" data-time="7" data-datetime="2019-01-04 3:30am">&nbsp;</td>

    <td class="empty" data-time="8" data-datetime="2019-01-04 4:00am">&nbsp;</td>

    <td class="empty" data-time="9" data-datetime="2019-01-04 4:30am">&nbsp;</td>

    <td class="empty" data-time="10" data-datetime="2019-01-04 5:00am">&nbsp;</td>

    <td class="empty" data-time="11" data-datetime="2019-01-04 5:30am">&nbsp;</td>

    <td class="empty" data-time="12" data-datetime="2019-01-04 6:00am">&nbsp;</td>

    <td class="empty" data-time="13" data-datetime="2019-01-04 6:30am">&nbsp;</td>

    <td class="empty" data-time="14" data-datetime="2019-01-04 7:00am">&nbsp;</td>

    <td class="empty" data-time="15" data-datetime="2019-01-04 7:30am">&nbsp;</td>

    <td class="empty" data-time="16" data-datetime="2019-01-04 8:00am">&nbsp;</td>
    <td class="empty" data-time="17" data-datetime="2019-01-04 8:30am">&nbsp;</td>
    <td class="empty" data-time="18" data-datetime="2019-01-04 9:00am">&nbsp;</td>
    <td class="empty" data-time="19" data-datetime="2019-01-04 9:30am">&nbsp;</td>
    <td class="empty" data-time="20" data-datetime="2019-01-04 10:00am">&nbsp;</td>
    <td class="empty" data-time="21" data-datetime="2019-01-04 10:30am">&nbsp;</td>
    <td class="empty" data-time="22" data-datetime="2019-01-04 11:00am">&nbsp;</td>
    <td class="empty" data-time="23" data-datetime="2019-01-04 11:30am">&nbsp;</td>
    <td class="empty" data-time="24" data-datetime="2019-01-04 12:00pm">&nbsp;</td>
    <td class="empty" data-time="25" data-datetime="2019-01-04 12:30pm">&nbsp;</td>
    <td class="empty" data-time="26" data-datetime="2019-01-04 1:00pm">&nbsp;</td>
    <td class="empty" data-time="27" data-datetime="2019-01-04 1:30pm">&nbsp;</td>
</tr>
<tr data-crew="1551">
<th class="firstColumn">Col2</th>


    <td class="empty" data-time="0" data-datetime="2019-01-04 12:00am">&nbsp;</td>

    <td class="empty" data-time="1" data-datetime="2019-01-04 12:30am">&nbsp;</td>

    <td class="empty" data-time="2" data-datetime="2019-01-04 1:00am">&nbsp;</td>

    <td class="empty" data-time="3" data-datetime="2019-01-04 1:30am">&nbsp;</td>

    <td class="empty" data-time="4" data-datetime="2019-01-04 2:00am">&nbsp;</td>

    <td class="empty" data-time="5" data-datetime="2019-01-04 2:30am">&nbsp;</td>

    <td class="empty" data-time="6" data-datetime="2019-01-04 3:00am">&nbsp;</td>

    <td class="empty" data-time="7" data-datetime="2019-01-04 3:30am">&nbsp;</td>

    <td class="empty" data-time="8" data-datetime="2019-01-04 4:00am">&nbsp;</td>

    <td class="empty" data-time="9" data-datetime="2019-01-04 4:30am">&nbsp;</td>

    <td class="empty" data-time="10" data-datetime="2019-01-04 5:00am">&nbsp;</td>

    <td class="empty" data-time="11" data-datetime="2019-01-04 5:30am">&nbsp;</td>

    <td class="empty" data-time="12" data-datetime="2019-01-04 6:00am">&nbsp;</td>

    <td class="empty" data-time="13" data-datetime="2019-01-04 6:30am">&nbsp;</td>

    <td class="empty" data-time="14" data-datetime="2019-01-04 7:00am">&nbsp;</td>

    <td class="empty" data-time="15" data-datetime="2019-01-04 7:30am">&nbsp;</td>

    <td class="empty" data-time="16" data-datetime="2019-01-04 8:00am">&nbsp;</td>

    <td class="empty" data-time="17" data-datetime="2019-01-04 8:30am">&nbsp;</td>

    <td class="empty" data-time="18" data-datetime="2019-01-04 9:00am">&nbsp;</td>

    <td class="empty" data-time="19" data-datetime="2019-01-04 9:30am">&nbsp;</td>

    <td class="empty" data-time="20" data-datetime="2019-01-04 10:00am">&nbsp;</td>

    <td class="empty" data-time="21" data-datetime="2019-01-04 10:30am">&nbsp;</td>

    <td class="empty" data-time="22" data-datetime="2019-01-04 11:00am">&nbsp;</td>

    <td class="empty" data-time="23" data-datetime="2019-01-04 11:30am">&nbsp;</td>

    <td class="empty" data-time="24" data-datetime="2019-01-04 12:00pm">&nbsp;</td>

    <td class="empty" data-time="25" data-datetime="2019-01-04 12:30pm">&nbsp;</td>

    <td class="empty" data-time="26" data-datetime="2019-01-04 1:00pm">&nbsp;</td>

    <td class="empty" data-time="27" data-datetime="2019-01-04 1:30pm">&nbsp;</td>
</tr>
</tbody>
</table>
</div>
</div>

最佳答案

问题在于元素的定位。尝试将 sectionContainer 的位置设置更改为 position: absolute;，它应该可以正常工作。

添加了背景颜色，以便于查看效果。

.sectionContainer {
    margin: 100px;
    position: absolute;
    background: green;
}
.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">Text Here</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">Text Here</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">&nbsp;</td>
    <td class="empty" data-time="1" data-datetime="2019-01-04 12:30am">&nbsp;</td>
    <td class="empty" data-time="2" data-datetime="2019-01-04 1:00am">&nbsp;</td>

    <td class="empty" data-time="3" data-datetime="2019-01-04 1:30am">&nbsp;</td>

    <td class="empty" data-time="4" data-datetime="2019-01-04 2:00am">&nbsp;</td>

    <td class="empty" data-time="5" data-datetime="2019-01-04 2:30am">&nbsp;</td>

    <td class="empty" data-time="6" data-datetime="2019-01-04 3:00am">&nbsp;</td>

    <td class="empty" data-time="7" data-datetime="2019-01-04 3:30am">&nbsp;</td>

    <td class="empty" data-time="8" data-datetime="2019-01-04 4:00am">&nbsp;</td>

    <td class="empty" data-time="9" data-datetime="2019-01-04 4:30am">&nbsp;</td>

    <td class="empty" data-time="10" data-datetime="2019-01-04 5:00am">&nbsp;</td>

    <td class="empty" data-time="11" data-datetime="2019-01-04 5:30am">&nbsp;</td>

    <td class="empty" data-time="12" data-datetime="2019-01-04 6:00am">&nbsp;</td>

    <td class="empty" data-time="13" data-datetime="2019-01-04 6:30am">&nbsp;</td>

    <td class="empty" data-time="14" data-datetime="2019-01-04 7:00am">&nbsp;</td>

    <td class="empty" data-time="15" data-datetime="2019-01-04 7:30am">&nbsp;</td>

    <td class="empty" data-time="16" data-datetime="2019-01-04 8:00am">&nbsp;</td>
    <td class="empty" data-time="17" data-datetime="2019-01-04 8:30am">&nbsp;</td>
    <td class="empty" data-time="18" data-datetime="2019-01-04 9:00am">&nbsp;</td>
    <td class="empty" data-time="19" data-datetime="2019-01-04 9:30am">&nbsp;</td>
    <td class="empty" data-time="20" data-datetime="2019-01-04 10:00am">&nbsp;</td>
    <td class="empty" data-time="21" data-datetime="2019-01-04 10:30am">&nbsp;</td>
    <td class="empty" data-time="22" data-datetime="2019-01-04 11:00am">&nbsp;</td>
    <td class="empty" data-time="23" data-datetime="2019-01-04 11:30am">&nbsp;</td>
    <td class="empty" data-time="24" data-datetime="2019-01-04 12:00pm">&nbsp;</td>
    <td class="empty" data-time="25" data-datetime="2019-01-04 12:30pm">&nbsp;</td>
    <td class="empty" data-time="26" data-datetime="2019-01-04 1:00pm">&nbsp;</td>
    <td class="empty" data-time="27" data-datetime="2019-01-04 1:30pm">&nbsp;</td>
</tr>
<tr data-crew="1551">
<th class="firstColumn">Col2</th>


    <td class="empty" data-time="0" data-datetime="2019-01-04 12:00am">&nbsp;</td>

    <td class="empty" data-time="1" data-datetime="2019-01-04 12:30am">&nbsp;</td>

    <td class="empty" data-time="2" data-datetime="2019-01-04 1:00am">&nbsp;</td>

    <td class="empty" data-time="3" data-datetime="2019-01-04 1:30am">&nbsp;</td>

    <td class="empty" data-time="4" data-datetime="2019-01-04 2:00am">&nbsp;</td>

    <td class="empty" data-time="5" data-datetime="2019-01-04 2:30am">&nbsp;</td>

    <td class="empty" data-time="6" data-datetime="2019-01-04 3:00am">&nbsp;</td>

    <td class="empty" data-time="7" data-datetime="2019-01-04 3:30am">&nbsp;</td>

    <td class="empty" data-time="8" data-datetime="2019-01-04 4:00am">&nbsp;</td>

    <td class="empty" data-time="9" data-datetime="2019-01-04 4:30am">&nbsp;</td>

    <td class="empty" data-time="10" data-datetime="2019-01-04 5:00am">&nbsp;</td>

    <td class="empty" data-time="11" data-datetime="2019-01-04 5:30am">&nbsp;</td>

    <td class="empty" data-time="12" data-datetime="2019-01-04 6:00am">&nbsp;</td>

    <td class="empty" data-time="13" data-datetime="2019-01-04 6:30am">&nbsp;</td>

    <td class="empty" data-time="14" data-datetime="2019-01-04 7:00am">&nbsp;</td>

    <td class="empty" data-time="15" data-datetime="2019-01-04 7:30am">&nbsp;</td>

    <td class="empty" data-time="16" data-datetime="2019-01-04 8:00am">&nbsp;</td>

    <td class="empty" data-time="17" data-datetime="2019-01-04 8:30am">&nbsp;</td>

    <td class="empty" data-time="18" data-datetime="2019-01-04 9:00am">&nbsp;</td>

    <td class="empty" data-time="19" data-datetime="2019-01-04 9:30am">&nbsp;</td>

    <td class="empty" data-time="20" data-datetime="2019-01-04 10:00am">&nbsp;</td>

    <td class="empty" data-time="21" data-datetime="2019-01-04 10:30am">&nbsp;</td>

    <td class="empty" data-time="22" data-datetime="2019-01-04 11:00am">&nbsp;</td>

    <td class="empty" data-time="23" data-datetime="2019-01-04 11:30am">&nbsp;</td>

    <td class="empty" data-time="24" data-datetime="2019-01-04 12:00pm">&nbsp;</td>

    <td class="empty" data-time="25" data-datetime="2019-01-04 12:30pm">&nbsp;</td>

    <td class="empty" data-time="26" data-datetime="2019-01-04 1:00pm">&nbsp;</td>

    <td class="empty" data-time="27" data-datetime="2019-01-04 1:30pm">&nbsp;</td>
</tr>
</tbody>
</table>
</div>
</div>

关于html - 表第一列绝对父级，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54047311/

上一篇：html - JSON 文件 - 打印多个信息

下一篇：css - Bootstrap 对齐 Font Awesome 图标

相关文章：

javascript - 在字符串的同一部分排除正则表达式

javascript - 如何在触摸元素时显示X轴坐标(Javascript)？

html - 网格列之间的分隔符

html - 创建下拉菜单，子菜单出现在鼠标悬停时

html - Div边框不显示

html - 垂直对齐网格内右对齐的导航栏元素

javascript - 我的按钮出现了不需要的样式，而且我似乎无法找到更改它的方法

css - 在屏幕上向右扩展偏移背景颜色

html - 创建响应式设计时在标题内调整图像大小

javascript - 在鼠标悬停时用背景图像替换文本颜色

©2024 IT工具网  联系我们