I am trying to set table header and table column fixed. I have found some other code on stackoverflow itself as well, but all of them seems to be an example of single header row.
In case of mine its actually 2 header row, and want to fix 6 left column. Here is my example:
#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 {
position: -webkit-sticky; /* for Safari */
position: sticky;
top: 0;
}
#matrixTable thead th.fixed-col,
#matrixTable tbody td.fixed-col{
position: -webkit-sticky; /* for Safari */
position: sticky;
left: 0;
}
<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>
<tr>
<th rowspan="2" class="fixed-col fixed-row cursor-pointer">Bldg<span></span></th>
<th rowspan="2" class="fixed-col fixed-row cursor-pointer">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">Floor<span></span></th>
<th rowspan="2" class="fixed-col fixed-row cursor-pointer">Stack<span></span></th>
<th rowspan="2" class="fixed-col fixed-row unit_type_sts cursor-pointer">UT<span></span></th>
<th rowspan="2" class="fixed-col fixed-row unit_sqft_sts cursor-pointer">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 ">
<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 ">
</th>
<th class="fixed-row fixed-col ">
<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 ">
</th>
<th class="fixed-row fixed-col ">
<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 ">
</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">1</td>
<td class="fixed-col">1109</td>
<td class="fixed-col">1</td>
<td class="fixed-col">109</td>
<td class="fixed-col">32115a5</td>
<td class="fixed-col">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">1</td>
<td class="fixed-col">1110</td>
<td class="fixed-col">1</td>
<td class="fixed-col">110</td>
<td class="fixed-col">32115a1</td>
<td class="fixed-col">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">1</td>
<td class="fixed-col">1111</td>
<td class="fixed-col">1</td>
<td class="fixed-col">111</td>
<td class="fixed-col">32115a2f</td>
<td class="fixed-col">787</td>
<td></td>
<td>0</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1615</td>
<td></td>
<td></td>
<td>0</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="fixed-col">1</td>
<td class="fixed-col">1112</td>
<td class="fixed-col">1</td>
<td class="fixed-col">112</td>
<td class="fixed-col">32115a4</td>
<td class="fixed-col">859</td>
<td></td>
<td>0</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1709</td>
<td>0</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>50</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="fixed-col">1</td>
<td class="fixed-col">1113</td>
<td class="fixed-col">1</td>
<td class="fixed-col">113</td>
<td class="fixed-col">32115a5</td>
<td class="fixed-col">916</td>
<td></td>
<td>0</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1817</td>
<td></td>
<td>0</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="fixed-col">1</td>
<td class="fixed-col">1115</td>
<td class="fixed-col">1</td>
<td class="fixed-col">115</td>
<td class="fixed-col">32115a2e</td>
<td class="fixed-col">773</td>
<td></td>
<td>0</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1615</td>
<td>0</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
The code might seems little long, but basically it follows this basic structure:
<table>
<thead>
<tr>
//with some column as rowspan=2
</tr>
<tr>
//here other th listed where rowspan not equal 2
</tr>
<tr>
<th class="fixed-row fixed-col ">
//here is a select checkbox field
</th>
</tr>
</thead>
<tbody>
<tr>
// here td of body
</tr>
</tbody>
</table>
In case if you need js fiddle you can find it here. https://jsfiddle.net/7bj6mngh/
#PS: I have removed some code from select on some col, because of character limit on SO, but full working code is in jsfiddle.
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>
Everything looks like it's working fine, (from your code snippet), I believe the thing that you missed was adding a background-color to the specific field that you want to get fixed.
position: sticky; is the way to go. In this example I have fixed two rows and two columns.
table {
font-family: sans-serif;
}
th, td {
white-space: nowrap;
padding: 5px 10px;
border: 1px solid #ddd;
background: white;
}
thead {
position: sticky;
top: 0;
z-index: 9;
}
thead th {
background-color: #f0f0ff;
font-weight: normal;
text-align: left;
}
thead td {
background-color: #f0f0f0;
}
td:first-child, th:first-child {
position: sticky;
left: 0;
width: 150px;
}
td:nth-child(2), th:nth-child(2) {
position: sticky;
left: 100px;
}
tbody td:first-child {
z-index: 8;
}
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
<th>Header 7</th>
<th>Header 8</th>
<th>Header 9</th>
<th>Header 10</th>
</tr>
<tr>
<td>Fixed 1</td>
<td>Fixed 2</td>
<td>Fixed 3</td>
<td>Fixed 4</td>
<td>Fixed 5</td>
<td>Fixed 6</td>
<td>Fixed 7</td>
<td>Fixed 8</td>
<td>Fixed 9</td>
<td>Fixed 10</td>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>Australia</td>
<td>Aardvark</td>
<td>A4</td>
<td>A5</td>
<td>A6</td>
<td>A7</td>
<td>A8</td>
<td>A9</td>
<td>A10</td>
</tr>
<tr>
<td>Banana</td>
<td>Botswana</td>
<td>Bison</td>
<td>B4</td>
<td>B5</td>
<td>B6</td>
<td>B7</td>
<td>B8</td>
<td>B9</td>
<td>B10</td>
</tr>
<tr>
<td>Cherry</td>
<td>Cameroon</td>
<td>Cheetah</td>
<td>C4</td>
<td>C5</td>
<td>C6</td>
<td>C7</td>
<td>C8</td>
<td>C9</td>
<td>C10</td>
</tr>
<tr>
<td>Durian</td>
<td>Denmark</td>
<td>Duck</td>
<td>D4</td>
<td>D5</td>
<td>D6</td>
<td>D7</td>
<td>D8</td>
<td>D9</td>
<td>D10</td>
</tr>
<tr>
<td>Elderberry</td>
<td>Eritrea</td>
<td>Elephant</td>
<td>E4</td>
<td>E5</td>
<td>E6</td>
<td>E7</td>
<td>E8</td>
<td>E9</td>
<td>E10</td>
</tr>
<tr>
<td>Fig</td>
<td>Finland</td>
<td>Flamingo</td>
<td>F4</td>
<td>F5</td>
<td>F6</td>
<td>F7</td>
<td>F8</td>
<td>F9</td>
<td>F10</td>
</tr>
<tr>
<td>Grape</td>
<td>Germany</td>
<td>Gorilla</td>
<td>G4</td>
<td>G5</td>
<td>G6</td>
<td>G7</td>
<td>G8</td>
<td>G9</td>
<td>G10</td>
</tr>
<tr>
<td>Honeydew</td>
<td>Honduras</td>
<td>Hummingbird</td>
<td>H4</td>
<td>H5</td>
<td>H6</td>
<td>H7</td>
<td>H8</td>
<td>H9</td>
<td>H10</td>
</tr>
<tr>
<td>Icaco</td>
<td>Italy</td>
<td>Ibis</td>
<td>I4</td>
<td>I5</td>
<td>I6</td>
<td>I7</td>
<td>I8</td>
<td>I9</td>
<td>I10</td>
</tr>
<tr>
<td>Jackfruit</td>
<td>Japan</td>
<td>Jacana</td>
<td>J4</td>
<td>J5</td>
<td>J6</td>
<td>J7</td>
<td>J8</td>
<td>J9</td>
<td>J10</td>
</tr>
<tr>
<td>Kiwifruit</td>
<td>Kenya</td>
<td>Kangaroo</td>
<td>I4</td>
<td>I5</td>
<td>I6</td>
<td>I7</td>
<td>I8</td>
<td>I9</td>
<td>I10</td>
</tr>
<tr>
<td>Lemon</td>
<td>Libya</td>
<td>Leopard</td>
<td>L4</td>
<td>L5</td>
<td>L6</td>
<td>L7</td>
<td>L8</td>
<td>L9</td>
<td>L10</td>
</tr>
<tr>
<td>Mango</td>
<td>Morocco</td>
<td>Monkey</td>
<td>M4</td>
<td>M5</td>
<td>M6</td>
<td>M7</td>
<td>M8</td>
<td>M9</td>
<td>M10</td>
</tr>
<tr>
<td>Nashi</td>
<td>Nigeria</td>
<td>Nightingale</td>
<td>N4</td>
<td>N5</td>
<td>N6</td>
<td>N7</td>
<td>N8</td>
<td>N9</td>
<td>N10</td>
</tr>
<tr>
<td>Orange</td>
<td>Oman</td>
<td>Octopus</td>
<td>O4</td>
<td>O5</td>
<td>O6</td>
<td>O7</td>
<td>O8</td>
<td>O9</td>
<td>O10</td>
</tr>
<tr>
<td>Pear</td>
<td>Peru</td>
<td>Pelican</td>
<td>P4</td>
<td>P5</td>
<td>P6</td>
<td>P7</td>
<td>P8</td>
<td>P9</td>
<td>P10</td>
</tr>
<tr>
<td>Quince</td>
<td>Qatar</td>
<td>Quail</td>
<td>Q4</td>
<td>Q5</td>
<td>Q6</td>
<td>Q7</td>
<td>Q8</td>
<td>Q9</td>
<td>Q10</td>
</tr>
<tbody>
</table>
#matrixTable_wrapper {
height: 300px;
min-width: 100%;
overflow: scroll;
position: relative;
}
#matrixTable thead th {
white-space: nowrap;
text-align: center;
}
#matrixTable thead {
position: -webkit-sticky; /* for Safari */
position: sticky;
top: 0;
background-color: #f5f5f5;
}
#matrixTable thead th.fixed-col,
#matrixTable tbody td.fixed-col{
position: -webkit-sticky; /* for Safari */
position: sticky;
left: 0;
}
<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>
https://jsfiddle.net/4vchqb1p/
I have made complete head sticky, that's possible method using only CSS.
Related
i want to hide 2 of my columns(td and tr) that i choose in my table when the screen minimized with Bootstrap css but it doesn't work for me.
<table class="table table-bordered table-fixed">
<thead>
<tr>
<th>#</th>
<th>Judul</th>
<th class="d-none d-sm-block">Batas Tanggal</th>
<th class="d-none d-sm-block">Ket</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Test</td>
<td class="d-none d-sm-block">29/12/2022</td>
<td class="d-none d-sm-block">60.000
</td>
<td>
<span class="btn btn-danger rounded-circle"><i class="fa fa-times"></i></span>
</td>
<td class="text-center">
<i class="fas fa-eye"></i>
<i class="fas fa-edit"></i>
<form action="#" method="post" class="d-inline">
<button class="btn btn-warning delete" onclick="return confirm('Are you sure?')"><i class="fas fa-trash"></i></button>
</form>
</td>
</tr>
<tr>
<td colspan="6" class="text-center">No Task</td>
</tr>
</tbody>
</table>
I'm working with a dynamic table where each line of this table is a person's reg and each person has a lot of files that must be shown below their reg. The following image is how the html table supposed to works:
I'm using bootstrap 3.3 in my project and this is my HTML table code that is not working properly:
<table class="table table-hover">
<thead>
<tr>
<th></th>
<th>Nome </th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>#1</strong></td>
<td>Peter Parker</td>
<td>
<button type="button" class="btn btn-warning btn-xs"
title=" Editar ">
<span class="glyphicon glyphicon-pencil"></span>
<!-- Editar -->
</button>
<button type="button" class="btn btn-danger btn-xs"
title=" Excluir ">
<span class="glyphicon glyphicon-trash"></span>
<!-- Excluir -->
</button>
</td>
<br><br>
<table class="table table-hover">
<tbody>
<tr>
<td>XLS</td>
<td>file1.xls</td>
<td></td>
</tr>
</tbody>
</table>
</tr>
</tbody>
<tfoot>
<td></td>
<td></td>
<td style="line-height: 12.0;">
<button class="btn btn-primary"
type="button" data-toggle="modal" data-target="#modalMembroFamiliar">
<span class="fa fa-plus"></span>
Add New Member
</button>
</td>
</tfoot>
</table>
The above code is rendering the HTML table as following:
How can I fix my code to make the table rendering like in the first image?
Yout have to insert the "inner" table into a <td> tag.
<table class="table table-hover">
<thead>
<tr>
<th></th>
<th>Nome </th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>#1</strong></td>
<td>Peter Parker</td>
<td>
<button type="button" class="btn btn-warning btn-xs"
title=" Editar ">
<span class="glyphicon glyphicon-pencil"></span>
<!-- Editar -->
</button>
<button type="button" class="btn btn-danger btn-xs"
title=" Excluir ">
<span class="glyphicon glyphicon-trash"></span>
<!-- Excluir -->
</button>
</td>
<td>
<table class="table table-hover">
<tbody>
<tr>
<td>XLS</td>
<td>file1.xls</td>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<tfoot>
<td></td>
<td></td>
<td style="line-height: 12.0;">
<button class="btn btn-primary"
type="button" data-toggle="modal" data-target="#modalMembroFamiliar">
<span class="fa fa-plus"></span>
Add New Member
</button>
</td>
</tfoot>
</table>
For more information, please review HTML5.2: Tabular data
I have a problem about aligning some items.
In the following Fiddle I have 2 options Option1 and Option2. I would like to align the toggle switches with the ones in the first two rows.
Basically I want the toggle switches to be in the second column of the table and the text that are below them in the first column.
Any ideas how can I solve it ?
Thank you
You're using bootstrap, so I would ditch the tables. But if you must use the tables, simply make the table rows and columns uniform.
Here's an updated fiddle with the correct nesting
<div class="container">
<table class="table table-bordered">
<thead style="" class="">
<tr class="d-flex">
<th class="col-6">My </th>
<th class="col-6"></th>
</tr>
</thead>
<tbody>
<tr class="d-flex">
<td class="text-sm-left col-sm-11">some text
</td>
<td class="text-sm-right col-sm-1">
<div class="switch">
<input id="cmn-toggle-5" class="cmn-toggle cmn-toggle-round-flat" type="checkbox">
<label for="cmn-toggle-5"></label>
</div>
</td>
</tr>
<tr class="d-flex">
<td class="text-sm-left col-sm-11">some text
</td>
<td class="text-sm-right col-sm-1">
<div class="switch">
<input id="cmn-toggle-5" class="cmn-toggle cmn-toggle-round-flat" type="checkbox">
<label for="cmn-toggle-5"></label>
</div>
</td>
</tr>
<tr class="d-flex">
<td class="col-sm-12">testtexttex :</td>
</tr>
<tr class="d-flex">
<td class="col-sm-11">Option1
<button type="button" class='btn btn-secondary '>
<span class="fa fa-envelope"></span>
</button></td>
<td class="col-sm-1">
<div class="switch">
<input id="cmn-toggle-5" class="cmn-toggle cmn-toggle-round-flat" type="checkbox">
<label for="cmn-toggle-5"></label>
</div>
</td>
</tr>
<tr class="d-flex">
<td class="col-sm-11">Option2
<button type="button" class='btn btn-secondary '>
<span class="fa fa-envelope"></span>
</button></td>
<td class="col-sm-1">
<div class="switch">
<input id="cmn-toggle-5" class="cmn-toggle cmn-toggle-round-flat" type="checkbox">
<label for="cmn-toggle-5"></label>
</div>
</td>
</tr>
</tbody>
</table>
</div>
I want to create a responsive table with footer. Right now i am using tag But i am facing issue with the footer. It doesnot show properly on different screen sizes. Footer should be fixed to bottom of page. If user tries to resize the page it should show scroll in that case, with footer at bottom.
Sample Image
<div class="container">
<table class="tablelog">
<thead id="thead">
<tr >
<th ><div style="width:15px;"></div></th>
<th ><div id="div-style">Column 1</div></th>
<th ><div id="div-style">Column 2</div></th>
<th ><div id="div-style">Column 3</div></th>
<th id="last-column"><div >Column 4</div></th>
</tr>
</thead>
<tbody id="tbody">
<tr class="active">
<td style="padding-right:15px;"><div class="triangleright"></div></td>
<td ><div id="div-style">value</div></td>
<td ><div id="div-style">value</div></td>
<td >
<div id="div-style">value</div>
</td>
<td id="last-column">value</td>
</tr><tr>
<td style="padding-right:15px;"><div></div></td>
<td ><div id="div-style">value</div></td>
<td ><div id="div-style">value</div></td>
<td >
<div id="div-style">value</div>
</td>
<td id="last-column">value</td>
</tr><tr>
<td style="padding-right:15px;"><div></div></td>
<td ><div id="div-style">value</div></td>
<td ><div id="div-style">value</div></td>
<td >
<div id="div-style">value</div>
</td>
<td id="last-column">value</td>
</tr>
</tbody>
<tfoot >
<div id="page-selector-control">
<div id="pageselectorButtonContainr">
<button id="page-selector-button-control" type="button" disabled=""><img id="page-selector-button-control-image" src="images/extreme-left.png"></button>
<button id="page-selector-button-control" type="button" disabled=""><img id="page-selector-button-control-image" src="images/arrow-left.png"></button>
<button id="page-selector-button-control" type="button" disabled=""><img id="page-selector-button-control-image" src="images/arrow-right.png"></button>
<button id="page-selector-button-control" type="button" disabled=""><img id="page-selector-button-control-image" src="images/extreme-right.png"></button>
</div>
<div class="pager-control">
<div id="pagerdevidercontainer">
<div id="pagerdeviderdivfirst"></div>
<div id="pagerdeviderdivsecond"></div>
</div>
<label >Page</label>
<input accept="number" id="pagetextfield" type="text" ng-reflect-model="1" class="ng-untouched ng-pristine ng-valid">
<label >of</label>
<label > </label>
<label >1</label>
</div>
</div>`enter code here`
</tfoot>
</table>
</div>
See updated <tfoot> here -
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="table-responsive">
<table class="table tablelog">
<thead id="thead">
<tr>
<th>
<div style="width:15px;"></div>
</th>
<th>
<div id="div-style">Column 1</div>
</th>
<th>
<div id="div-style">Column 2</div>
</th>
<th>
<div id="div-style">Column 3</div>
</th>
<th id="last-column">
<div>Column 4</div>
</th>
</tr>
</thead>
<tbody id="tbody">
<tr class="active">
<td style="padding-right:15px;">
<div class="triangleright"></div>
</td>
<td>
<div id="div-style">value</div>
</td>
<td>
<div id="div-style">value</div>
</td>
<td>
<div id="div-style">value</div>
</td>
<td id="last-column">value</td>
</tr>
<tr>
<td style="padding-right:15px;">
<div></div>
</td>
<td>
<div id="div-style">value</div>
</td>
<td>
<div id="div-style">value</div>
</td>
<td>
<div id="div-style">value</div>
</td>
<td id="last-column">value</td>
</tr>
<tr>
<td style="padding-right:15px;">
<div></div>
</td>
<td>
<div id="div-style">value</div>
</td>
<td>
<div id="div-style">value</div>
</td>
<td>
<div id="div-style">value</div>
</td>
<td id="last-column">value</td>
</tr>
</tbody>
<!-- <tfoot>
<tr>
<th></th>
<th colspan=3>
<button id="page-selector-button-control" type="button" disabled=""><img id="page-selector-button-control-image" src="images/extreme-left.png">1</button>
<button id="page-selector-button-control" type="button" disabled=""><img id="page-selector-button-control-image" src="images/arrow-left.png">2</button>
<button id="page-selector-button-control" type="button" disabled=""><img id="page-selector-button-control-image" src="images/arrow-right.png">3</button>
<button id="page-selector-button-control" type="button" disabled=""><img id="page-selector-button-control-image" src="images/extreme-right.png">4</button>
</th>
<th colspan=1>
<label>Page</label>
<input accept="number" id="pagetextfield" type="text" ng-reflect-model="1" class="ng-untouched ng-pristine ng-valid">
<label>of</label>
<label> </label>
<label>1</label>
</th>
</tr>
</tfoot> -->
</table>
</div>
</div>
</body>
<footer style="position: fixed;bottom: 0px;" class="col-xs-12">
<div id="pageselectorButtonContainr" class="col-xs-6">
<button id="page-selector-button-control" type="button" disabled=""><img id="page-selector-button-control-image" src="images/extreme-left.png"></button>
<button id="page-selector-button-control" type="button" disabled=""><img id="page-selector-button-control-image" src="images/arrow-left.png"></button>
<button id="page-selector-button-control" type="button" disabled=""><img id="page-selector-button-control-image" src="images/arrow-right.png"></button>
<button id="page-selector-button-control" type="button" disabled=""><img id="page-selector-button-control-image" src="images/extreme-right.png"></button>
</div>
<div class="pager-control col-xs-6 pull-right">
<label>Page</label>
<input accept="number" id="pagetextfield" type="text" ng-reflect-model="1" class="ng-untouched ng-pristine ng-valid">
<label>of</label>
<label> </label>
<label>1</label>
</div>
</footer>
</html>
I've also used bootstrap here, which is useful for responsive design.
I have a page with 1 visible DIV and 2 hidden DIVs. When I click a button I want to show all 3 DIVs in the order as displayed below. I'm using Bootstrap.
Whats is happening is that the Visible Div is appearing only after the Hidden Div 2
Here's the code:
<div id="divEditor" hidden class="col-sm-8">
<textarea name="editor" id="editor"></textarea>
<div class="col-sm-6 marginVert12">
<a class="btn btn-single btn-gray pull-left" ng-click="stopEditing()"><i class="fa-angle-left"></i> Voltar</a>
</div>
<div class="col-sm-6 marginVert12">
<label class="col-sm-8">
<input type="text" placeholder="Nome" ng-model="nomeTemplate" class="form-control" />
</label>
<a class="btn btn-single btn-success col-sm-2" ng-click="stopEditing()"><i class="fa-save"></i> Guardar</a>
</div>
</div>
<div id="divVariaveis" class="col-sm-4 divDetail">
<h3 class="textAlign-Center">Variáveis</h3>
<table class="table table-bordered">
<thead>
<tr>
<th>Valor</th>
<th>Texto</th>
</tr>
</thead>
<tbody>
<tr>
<td>Número Contrato</td>
<td>##contrato##</td>
</tr>
<tr>
<td>Gestor de Conta</td>
<td>##gc##</td>
</tr>
<tr>
<td>Nome do Cliente</td>
<td>##clienteNome##</td>
</tr>
<tr>
<td>Nome do Cliente</td>
<td>##clienteNome##</td>
</tr>
<tr>
<td>Número Contrato</td>
<td>##contrato##</td>
</tr>
<tr>
<td>Gestor de Conta</td>
<td>##gc##</td>
</tr>
<tr>
<td>Nome do Cliente</td>
<td>##clienteNome##</td>
</tr>
<tr>
<td>Nome do Cliente</td>
<td>##clienteNome##</td>
</tr>
<tr>
<td>Número Contrato</td>
<td>##contrato##</td>
</tr>
<tr>
<td>Gestor de Conta</td>
<td>##gc##</td>
</tr>
<tr>
<td>Nome do Cliente</td>
<td>##clienteNome##</td>
</tr>
<tr>
<td>Nome do Cliente</td>
<td>##clienteNome##</td>
</tr>
</tbody>
</table>
</div>
<div class="col-sm-8">
<div class="col-sm-12 marginVert12">
<a class="btn btn-single btn-success pull-right" ng-click="startEditing()" ng-class="editing ? 'disabled' : ''"><i class="fa-file-o"></i> Novo Template</a>
</div>
<table class="table table-striped table-bordered table-hover" id="tblTemplates">
<thead>
<tr>
<th>Nome</th>
<th>Ações</th>
</tr>
</thead>
<tbody>
<tr>
<td>Rodapé</td>
<td><button class="btn btn-single btn-orange" ng-click="footerEditing()" ng-class="editing ? 'disabled' : ''"><i class="fa-edit"></i> Editar</button></td>
</tr>
<tr>
<td>Carta Apresentação</td>
<td>
<button class="btn btn-single btn-info pull-left" ng-class="editing ? 'disabled' : ''"><i class="fa-file-pdf-o"></i> Ver em PDF</button>
<button class="btn btn-single btn-orange pull-left" ng-click="cartaEditing()" ng-class="editing ? 'disabled' : ''"><i class="fa-edit"></i> Editar</button>
<button class="btn btn-single btn-danger pull-left" ng-class="editing ? 'disabled' : ''"><i class="fa-remove"></i> Remover</button>
</td>
</tr>
</tbody>
</table>
</div>
This is how you want to arrange them:
<div class="container">
<div class="row">
<div class="col-sm-8">
<div class="row">
<div class="col-sm-12"></div>
<div class="col-sm-12"></div>
</div>
</div>
<div class="col-sm-4"></div>
</div>
</div>
Your col-sm-8's content should go in the above's col-sm-12s