使用純 css 修復了 html 表頭行和左列

Question

我正在嘗試將表頭和表列設置為固定。 我也在 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 fiddle，你可以在這里找到它。 https://jsfiddle.net/7bj6mngh/

#PS：由於 SO 的字符限制，我已經從某些 col 的選擇中刪除了一些代碼，但完整的工作代碼在 jsfiddle 中。

Answer 1

 #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 的可能方法。

Answer 2

您只需為需要水平固定的列指定一個左值，您可以通過檢查它們的offsetLeft值來獲得，如您所見，我創建了col類，它根據它們的位置指定左值，對於垂直固定標題只需指定top:0和position:sticky

也使用border-collapse:separate not 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>

Answer 3

一切看起來都很好，（從您的代碼片段中），我相信您錯過的事情是向您想要修復的特定字段添加background-color 。

Answer 4

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>