Fixed html table header row and left column using pure css
You just got to specify a left value for columns that needs to be fixed horizontally that you can get by checking their offsetLeft value as you can see I have created col class which specifies left value as per their position and for vertical fixed header just specify top:0 and position:sticky
Also use border-collapse:separate not collapse because in collapse the border top and bottom of th or td also gets attached to surrounding elements so they won't stick.
This will work
#matrixTable_wrapper {
height: 300px;
min-width: 100%;
overflow: scroll;
position: relative;
}
#matrixTable thead th {
white-space: nowrap;
text-align: center;
}
#matrixTable thead th.fixed-row {
}
#matrixTable thead th.fixed-col,
#matrixTable tbody td.fixed-col{
}
.sticky_header
{
top:0;
left: 0;
position: sticky;
z-index: 10000;
background: white;
}
.sticky_left
{
position: sticky;
z-index: 1000;
background: white;
}
.col_1
{
left: 0px;
}
.col_2
{
left: 265px;
}
.col_3
{
left: 326px;
}
.col_4
{
left: 591px;
}
.col_5
{
left: 656px;
}
.col_6
{
left: 921px;
}
#matrixTable
{
border-collapse: separate;
border-spacing: 0px;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.14/css/bootstrap-multiselect.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div id="matrixTable_wrapper" className="no-footer">
<table id="matrixTable" class="table matrix-table fixed-header table-bordered dataTable no-footer">
<thead class="sticky_header">
<tr>
<th rowspan="2" class="fixed-col fixed-row cursor-pointer sticky_left col_1">Bldg<span></span></th>
<th rowspan="2" class="fixed-col fixed-row cursor-pointer sticky_left col_2">Unit<span><i class="ml-1 fa fa-sort-asc" aria-hidden="true"></i></span></th>
<th rowspan="2" class="fixed-col fixed-row cursor-pointer sticky_left col_3">Floor<span></span></th>
<th rowspan="2" class="fixed-col fixed-row cursor-pointer sticky_left col_4">Stack<span></span></th>
<th rowspan="2" class="fixed-col fixed-row unit_type_sts cursor-pointer sticky_left col_5">UT<span></span></th>
<th rowspan="2" class="fixed-col fixed-row unit_sqft_sts cursor-pointer sticky_left col_6">SqFt<span></span></th>
<th colspan="1" class="fixed-row">Balcony</th>
<th colspan="5" class="fixed-row">Floor Level</th>
<th colspan="1" class="fixed-row">Flooring</th>
<th colspan="1" class="fixed-row">Rent</th>
<th colspan="5" class="fixed-row">Unclear</th>
<th colspan="4" class="fixed-row">View/Exposure</th>
</tr>
<tr>
<th title="Courtyard-Unenclosed Patio" class="text-nowrap fixed-row cursor-pointer">Courtyard-Un...<span></span></th>
<th title="Floor Level 01" class="text-nowrap fixed-row cursor-pointer">Floor Level 01<span></span></th>
<th title="Floor Level 02" class="text-nowrap fixed-row cursor-pointer">Floor Level 02<span></span></th>
<th title="Floor Level 03" class="text-nowrap fixed-row cursor-pointer">Floor Level 03<span></span></th>
<th title="Floor Level 04" class="text-nowrap fixed-row cursor-pointer">Floor Level 04<span></span></th>
<th title="Floor Level 05" class="text-nowrap fixed-row cursor-pointer">Floor Level 05<span></span></th>
<th title="Luxury Vinyl Planking" class="text-nowrap fixed-row cursor-pointer">Luxury Vinyl...<span></span></th>
<th title="Rent" class="text-nowrap fixed-row cursor-pointer">Rent<span></span></th>
<th title="Scheme 1" class="text-nowrap fixed-row cursor-pointer">Scheme 1<span></span></th>
<th title="Scheme 3" class="text-nowrap fixed-row cursor-pointer">Scheme 3<span></span></th>
<th title="Scheme 2" class="text-nowrap fixed-row cursor-pointer">Scheme 2<span></span></th>
<th title="Noise" class="text-nowrap fixed-row cursor-pointer">Noise<span></span></th>
<th title="Limited Natural Light" class="text-nowrap fixed-row cursor-pointer">Limited Natu...<span></span></th>
<th title="View - Pool" class="text-nowrap fixed-row cursor-pointer">View - Pool<span></span></th>
<th title="View - Obstructed" class="text-nowrap fixed-row cursor-pointer">View - Obstr...<span></span></th>
<th title="View - Courtyard" class="text-nowrap fixed-row cursor-pointer">View - Court...<span></span></th>
<th title="View - Property Perimeter" class="text-nowrap fixed-row cursor-pointer">View - Prope...<span></span></th>
</tr>
<tr>
<th class="fixed-row fixed-col sticky_left col_1">
<span class="multiselect-native-select">
<select multiple="" id="multiSelectMatrixColbuilding_number" class="form-control multiSelect"></select>
<div class="btn-group" style="width: 240px;">
<button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" data-html="true" title="All" aria-expanded="false" style="width: 100%; overflow: hidden; text-overflow: ellipsis;"><span id="mstbuilding_number" class="multiselect-selected-text">All</span> <b class="caret"></b></button>
<ul id="multiSelectMatrixDropDownbuilding_number" class="scrollable-menu multiselect-container dropdown-menu pull-right" x-placement="top-start" style="position: absolute; top: 0px; left: 0px; will-change: top, left;">
<li data-value="---" class="multiselect-item multiselect-item-0"><a tabindex="0" class="checkbox"><label class="checkbox" title="---"><input type="checkbox" class="checkbox-row-0 other-checkbox" name="col_building_number[]" data-col-name="building_number" value="---" checked="">Select All</label></a></li>
<li data-value="1" class="multiselect-item multiselect-item-1"><a tabindex="1" class="checkbox"><label class="checkbox" title="1"><input type="checkbox" class="checkbox-row-1 other-checkbox" name="col_building_number[]" data-col-name="building_number" value="1" checked="">1</label></a></li>
</ul>
</div>
</span>
</th>
<th class="fixed-row fixed-col sticky_left col_2">
</th>
<th class="fixed-row fixed-col sticky_left col_3">
<span class="multiselect-native-select">
<select multiple="" id="multiSelectMatrixColfloor" class="form-control multiSelect"></select>
<div class="btn-group" style="width: 240px;">
<button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" data-html="true" title="All" aria-expanded="false" style="width: 100%; overflow: hidden; text-overflow: ellipsis;"><span id="mstfloor" class="multiselect-selected-text">All</span> <b class="caret"></b></button>
</div>
</span>
</th>
<th class="fixed-row fixed-col sticky_left col_4">
</th>
<th class="fixed-row fixed-col sticky_left col_5">
<span class="multiselect-native-select">
<select multiple="" id="multiSelectMatrixColunit_type" class="form-control multiSelect"></select>
<div class="btn-group" style="width: 240px;">
<button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" data-html="true" title="All" aria-expanded="false" style="width: 100%; overflow: hidden; text-overflow: ellipsis;"><span id="mstunit_type" class="multiselect-selected-text">All</span> <b class="caret"></b></button>
</div>
</span>
</th>
<th class="fixed-row fixed-col sticky_left col_6">
</th>
<th class="fixed-row fixed-col ">
<span class="multiselect-native-select">
<select multiple="" id="multiSelectMatrixCol63982" class="form-control multiSelect"></select>
<div class="btn-group" style="width: 240px;">
<button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" data-html="true" title="All" aria-expanded="false" style="width: 100%; overflow: hidden; text-overflow: ellipsis;"><span id="mst63982" class="multiselect-selected-text">All</span> <b class="caret"></b></button>
</div>
</span>
</th>
<th class="fixed-row fixed-col ">
</th>
<th class="fixed-row fixed-col ">
<span class="multiselect-native-select">
<select multiple="" id="multiSelectMatrixCol63984" class="form-control multiSelect"></select>
<div class="btn-group" style="width: 240px;">
<button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" data-html="true" title="All" aria-expanded="false" style="width: 100%; overflow: hidden; text-overflow: ellipsis;"><span id="mst63984" class="multiselect-selected-text">All</span> <b class="caret"></b></button>
</div>
</span>
</th>
<th class="fixed-row fixed-col ">
</th>
<th class="fixed-row fixed-col ">
<span class="multiselect-native-select">
<select multiple="" id="multiSelectMatrixCol63987" class="form-control multiSelect"></select>
<div class="btn-group" style="width: 240px;">
<button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" data-html="true" title="All" aria-expanded="false" style="width: 100%; overflow: hidden; text-overflow: ellipsis;"><span id="mst63987" class="multiselect-selected-text">All</span> <b class="caret"></b></button>
</div>
</span>
</th>
<th class="fixed-row fixed-col ">
</th>
<th class="fixed-row fixed-col ">
<span class="multiselect-native-select">
<select multiple="" id="multiSelectMatrixCol63974" class="form-control multiSelect"></select>
<div class="btn-group" style="width: 240px;">
<button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" data-html="true" title="All" aria-expanded="false" style="width: 100%; overflow: hidden; text-overflow: ellipsis;"><span id="mst63974" class="multiselect-selected-text">All</span> <b class="caret"></b></button>
</div>
</span>
</th>
<th class="fixed-row fixed-col ">
</th>
<th class="fixed-row fixed-col ">
<span class="multiselect-native-select">
<select multiple="" id="multiSelectMatrixCol63973" class="form-control multiSelect"></select>
<div class="btn-group" style="width: 240px;">
<button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" data-html="true" title="All" aria-expanded="false" style="width: 100%; overflow: hidden; text-overflow: ellipsis;"><span id="mst63973" class="multiselect-selected-text">All</span> <b class="caret"></b></button>
</div>
</span>
</th>
<th class="fixed-row fixed-col ">
</th>
<th class="fixed-row fixed-col ">
<span class="multiselect-native-select">
<select multiple="" id="multiSelectMatrixCol63978" class="form-control multiSelect"></select>
<div class="btn-group" style="width: 240px;">
<button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" data-html="true" title="All" aria-expanded="false" style="width: 100%; overflow: hidden; text-overflow: ellipsis;"><span id="mst63978" class="multiselect-selected-text">All</span> <b class="caret"></b></button>
</div>
</span>
</th>
<th class="fixed-row fixed-col ">
</th>
<th class="fixed-row fixed-col ">
<span class="multiselect-native-select">
<select multiple="" id="multiSelectMatrixCol63983" class="form-control multiSelect"></select>
<div class="btn-group" style="width: 240px;">
<button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" data-html="true" title="All" aria-expanded="false" style="width: 100%; overflow: hidden; text-overflow: ellipsis;"><span id="mst63983" class="multiselect-selected-text">All</span> <b class="caret"></b></button>
</div>
</span>
</th>
<th class="fixed-row fixed-col ">
</th>
<th class="fixed-row fixed-col ">
<span class="multiselect-native-select">
<select multiple="" id="multiSelectMatrixCol63979" class="form-control multiSelect"></select>
<div class="btn-group" style="width: 240px;">
<button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" data-html="true" title="All" aria-expanded="false" style="width: 100%; overflow: hidden; text-overflow: ellipsis;"><span id="mst63979" class="multiselect-selected-text">All</span> <b class="caret"></b></button>
</div>
</span>
</th>
<th class="fixed-row fixed-col">
</th>
<th class="fixed-row fixed-col">
<span class="multiselect-native-select">
<select multiple="" id="multiSelectMatrixCol63985" class="form-control multiSelect"></select>
<div class="btn-group" style="width: 240px;">
<button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" data-html="true" title="All" aria-expanded="false" style="width: 100%; overflow: hidden; text-overflow: ellipsis;"><span id="mst63985" class="multiselect-selected-text">All</span> <b class="caret"></b></button>
</div>
</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="fixed-col sticky_left col_1">1</td>
<td class="fixed-col sticky_left col_2">1109</td>
<td class="fixed-col sticky_left col_3">1</td>
<td class="fixed-col sticky_left col_4">109</td>
<td class="fixed-col sticky_left col_5">32115a5</td>
<td class="fixed-col sticky_left col_6">916</td>
<td></td>
<td>0</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>125</td>
<td>1817</td>
<td>0</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="fixed-col sticky_left col_1">1</td>
<td class="fixed-col sticky_left col_2">1110</td>
<td class="fixed-col sticky_left col_3">1</td>
<td class="fixed-col sticky_left col_4">110</td>
<td class="fixed-col sticky_left col_5">32115a1</td>
<td class="fixed-col sticky_left col_6">723</td>
<td></td>
<td>0</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1575</td>
<td></td>
<td>0</td>
<td></td>
<td></td>
<td></td>
<td>50</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="fixed-col sticky_left col_1">1</td>
<td class="fixed-col sticky_left col_2">1110</td>
<td class="fixed-col sticky_left col_3">1</td>
<td class="fixed-col sticky_left col_4">110</td>
<td class="fixed-col sticky_left col_5">32115a1</td>
<td class="fixed-col sticky_left col_6">723</td>
<td></td>
<td>0</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1575</td>
<td></td>
<td>0</td>
<td></td>
<td></td>
<td></td>
<td>50</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="fixed-col sticky_left col_1">1</td>
<td class="fixed-col sticky_left col_2">1110</td>
<td class="fixed-col sticky_left col_3">1</td>
<td class="fixed-col sticky_left col_4">110</td>
<td class="fixed-col sticky_left col_5">32115a1</td>
<td class="fixed-col sticky_left col_6">723</td>
<td></td>
<td>0</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1575</td>
<td></td>
<td>0</td>
<td></td>
<td></td>
<td></td>
<td>50</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>How do I create an HTML table with a fixed/frozen left column and a scrollable body?
If you want a table where only the columns scroll horizontally, you can position: absolute the first column (and specify its width explicitly), and then wrap the entire table in an overflow-x: scroll block. Don't bother trying this in IE7, however...
Relevant HTML & CSS:
table {
border-collapse: separate;
border-spacing: 0;
border-top: 1px solid grey;
}
td,
th {
margin: 0;
border: 1px solid grey;
white-space: nowrap;
border-top-width: 0px;
}
div {
width: 500px;
overflow-x: scroll;
margin-left: 5em;
overflow-y: visible;
padding: 0;
}
.headcol {
position: absolute;
width: 5em;
left: 0;
top: auto;
border-top-width: 1px;
/*only relevant for first row*/
margin-top: -1px;
/*compensate for top border*/
}
.headcol:before {
content: 'Row ';
}
.long {
background: yellow;
letter-spacing: 1em;
}<div>
<table>
<tr>
<th class="headcol">1</th>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<th class="headcol">2</th>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<th class="headcol">3</th>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<th class="headcol">4</th>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<th class="headcol">5</th>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<th class="headcol">6</th>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
</table>
</div>Related Topics
How to Remove Specific Text With CSS
Two Images, Side by Side Responsive
How to Embed HTML Formatting Inside of a <Textarea> Tag
How to Avoid Page Break Inside Table Row for Wkhtmltopdf
Angular: *Ngif Tag on Input Element Causes It to Be Undefined. Cannot Read Value from Input Field
Why Is There an Unexplainable Gap Between These Inline-Block Div Elements
Which HTML Elements Can Receive Focus
Stretch and Scale CSS Background
How to Limit the Maximum Files Chosen When Using Multiple File Input
How to Use Two Ngfor in HTML Angular 4
Create an Object for Google Chrome
How to Create an HTML Table With a Fixed/Frozen Left Column and a Scrollable Body
Change Background Color of Iframe Issue