固定html表头行和左列使用纯css

我试图设置表头和表列固定。我也在stackoverflow本身上发现了一些其他的代码，但它们似乎都是单个标题行的例子。

在我的情况下，它实际上是2头行，并想要修复6左列。下面是我的例子:

#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>

代码可能看起来有点长，但基本上遵循以下基本结构:

<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>

如果你需要js提琴，你可以在这里找到它。https://jsfiddle.net/7bj6mngh/

#PS:我已经删除了一些代码从选择一些冷，因为字符限制在SO，但完整的工作代码是在jsfiddle。

你只需要为需要水平固定的列指定一个左值你可以通过检查它们的offsetLeft值来获得你可以看到我创建了col类它根据它们的位置指定左值对于垂直固定的标题只指定top:0和position:sticky

也使用border-collapse:separate而不是collapse，因为在折叠时，th或td的边框顶部和底部也会附着在周围的元素上，所以它们不会粘在一起。

这将工作

#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>

一切看起来都很好，(从你的代码片段)，我相信你错过的事情是添加一个background-color到你想要固定的特定字段。

position: sticky;是可行的。在这个例子中，我固定了两行两列。

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/

我已经做了完整的头部粘滞，这是可能的方法，只使用CSS。

这将工作

相关内容

最新更新

热门标签：