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>
Related
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.
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 have a table and put 2 buttons in the last column, but they are one below each other. It looks as following:
The HTML code look as following:
<div class="table-responsive">
<table class="table table-bordered table-hover" style="width: 80%;">
<thead>
<tr>
<th>ID</th>
<th>Gender</th>
<th>FirstName</th>
<th>LastName</th>
<th>EMail</th>
<th>CompanyName</th>
<th>JobTitle</th>
<th>Phone</th>
<th>Avatar</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in contacts">
<td>{{item.Id}}</td>
<td>{{item.Gender}}</td>
<td>{{item.FirstName}}</td>
<td>{{item.LastName}}</td>
<td>{{item.EMail}}</td>
<td>{{item.CompanyName}}</td>
<td>{{item.JobTitle}}</td>
<td>{{item.Phone}}</td>
<td><img src="{{ item.Avatar }}" /></td>
<td>
<button ng-model="$scope.Contact" ng-click="edit(contacts[$index])" class="btn btn-primary">Edit</button>
<button ng-click="delete($index)" class="btn btn-primary">Delete</button>
</td>
</tr>
</tbody>
</table>
I've tried a lot of settings, but it doesn't help.
How to put them next to each other?
UPDATE:
You can use below code and achieve
<button ng-model="$scope.Contact" ng-click="edit(contacts[$index])" class="btn btn-primary" style="display:inline-block;vertical-align:middle;">Edit</button>
<button ng-click="delete($index)" class="btn btn-primary" style="display:inline-block;vertical-align:middle;">Delete</button>
Or if you use Bootstrap then you can get Bootstrap Code from Bootstrap Group Buttons or use below code
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">Left</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">Middle</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">Right</button>
</div>
</div>
to achieve
This is an easy problem to fix.
As you used tables in your structure, you can use tables in the last column.
Inside that last column td, add a table. The table body should look like this.
<div class="table-responsive">
<table class="table table-bordered table-hover" style="width: 80%;">
<thead>
<tr>
<th>ID</th>
<th>Gender</th>
<th>FirstName</th>
<th>LastName</th>
<th>EMail</th>
<th>CompanyName</th>
<th>JobTitle</th>
<th>Phone</th>
<th>Avatar</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in contacts">
<td>{{item.Id}}</td>
<td>{{item.Gender}}</td>
<td>{{item.FirstName}}</td>
<td>{{item.LastName}}</td>
<td>{{item.EMail}}</td>
<td>{{item.CompanyName}}</td>
<td>{{item.JobTitle}}</td>
<td>{{item.Phone}}</td>
<td>
<img src="{{ item.Avatar }}" />
</td>
<td>
<table>
<tbody>
<tr>
<td>
<button ng-model="$scope.Contact" ng-click="edit(contacts[$index])" class="btn btn-primary">Edit</button>
</td>
<td>
<button ng-click="delete($index)" class="btn btn-primary">Delete</button>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
in stylesheet make button css display to inline or inline-block
Also do check the TD width and buttons width. If the buttons width is greater than the TD width it will break to next row for sure
Try this
<div class="list-unstyled list-inline"><button ng-model="$scope.Contact" ng-click="edit(contacts[$index])" class="btn btn-primary">Edit</button><button ng-click="delete($index)" class="btn btn-primary">Delete</button></div>
What you were looking for is a button group.
<div class="btn-toolbar" role="toolbar">
<!-- Button trigger modal -->
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal"
data-target="#editModal">Edit
</button>
</div>
<div class="btn-group mr-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-outline-danger btn-sm" id="delete">Delete
</button>
</div>
</div>
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