Karim Mtl
Reputation: 1251
Table first column absolute to parent
I am trying to have the first left column of an HTML table always showing even if the user scrolls to the right.
I am trying to adapt the solution that I found on this thread how do I create an HTML table with fixed/frozen left column and scrollable body? to my needs.
Below you can find a functional example. What I need help with is to be able to position the first column at the same position as the div class "sectionContainer". At this moment it is at the complete left of the whole window (It seems that the absolute positioning applies to the body tag instead of the parent 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>Upvotes: 0
Views: 314
Answers (1)
Drubio
Reputation: 1366
The problem is in the positioning of your elements. Try changing the position set for the sectionContainer to position: absolute; and it should work as you want.
Added background color so it is easily to see the effect.
.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"> </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>Upvotes: 0
Related Questions
- How get columns fixed in a html-table and JUST one column relative?
- How to make HTML table First column fix
- div style absolute in a table cell
- Styling for only the first column in an HTML table
- How to customize the first row of every column in HTML?
- fix position of table's first 2 column using css
- how to make html table first row 'absolute'
- Absolute positioning a table
- HTML position absolute for a table
- absolute positioning inside a table