突然ですが、既存アプリのメンテンナンスで、DataTablesのfixedHeaderを取り込もうとしてやってみたところ、機能しませんでした。
アプリ本体は、Bootstrap3を使用(少し古いですが)。
navbar-fixed-top でnavbarを固定している形です。
サンプルコード(変更前)
<!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>Bootstrap3 - DataTables fixedHeader</title> <script src="https://code.jquery.com/jquery-3.5.1.js"> <script src="https://cdn.datatables.net/1.11.4/js/dataTables.bootstrap.min.js" type="text/javascript"></script> <script src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js" type="text/javascript"></script> <script src="https://cdn.datatables.net/fixedheader/3.2.1/js/dataTables.fixedHeader.min.js" type="text/javascript"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.datatables.net/1.11.4/css/dataTables.bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.datatables.net/fixedheader/3.2.1/css/fixedHeader.bootstrap.min.css" rel="stylesheet"> <script type="text/javascript" class="init"> jQuery(function ($) { var table = $('#example').DataTable( { lengthChange: false, searching: false, paging: false, fixedHeader: true, info: false } ); } ); </script> </head> <body style="padding-top:30px;"> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="nav navbar-brand">Bootstrap3 dataTables Sample Navi</div> </nav> <div class="container"> <div class="page-header"> <h1>都道府県リスト</h1> <div> <table id="example" class="table table-striped table-bordered"> <thead> <tr><th>Code</th><th>都道府県名</th><th>県庁所在地</th></tr> </thead> <tbody> <tr><td>1</td><td>北海道</td><td>札幌市</td></tr> <tr><td>2</td><td>青森県</td><td>青森市</td></tr> <tr><td>3</td><td>岩手県</td><td>盛岡市</td></tr> <tr><td>4</td><td>宮城県</td><td>仙台市</td></tr> <tr><td>5</td><td>秋田県</td><td>秋田市</td></tr> <tr><td>6</td><td>山形県</td><td>山形市</td></tr> <tr><td>7</td><td>福島県</td><td>福島市</td></tr> <tr><td>8</td><td>茨城県</td><td>水戸市</td></tr> <tr><td>9</td><td>栃木県</td><td>宇都宮市</td></tr> <tr><td>10</td><td>群馬県</td><td>前橋市</td></tr> <tr><td>11</td><td>埼玉県</td><td>さいたま市</td></tr> <tr><td>12</td><td>千葉県</td><td>千葉市</td></tr> <tr><td>13</td><td>東京都</td><td>新宿区</td></tr> <tr><td>14</td><td>神奈川県</td><td>横浜市</td></tr> <tr><td>15</td><td>新潟県</td><td>新潟市</td></tr> <tr><td>16</td><td>富山県</td><td>富山市</td></tr> <tr><td>17</td><td>石川県</td><td>金沢市</td></tr> <tr><td>18</td><td>福井県</td><td>福井市</td></tr> <tr><td>19</td><td>山梨県</td><td>甲府市</td></tr> <tr><td>20</td><td>長野県</td><td>長野市</td></tr> <tr><td>21</td><td>岐阜県</td><td>岐阜市</td></tr> <tr><td>22</td><td>静岡県</td><td>静岡市</td></tr> <tr><td>23</td><td>愛知県</td><td>名古屋市</td></tr> <tr><td>24</td><td>三重県</td><td>津市</td></tr> <tr><td>25</td><td>滋賀県</td><td>大津市</td></tr> <tr><td>26</td><td>京都府</td><td>京都市</td></tr> <tr><td>27</td><td>大阪府</td><td>大阪市</td></tr> <tr><td>28</td><td>兵庫県</td><td>神戸市</td></tr> <tr><td>29</td><td>奈良県</td><td>奈良市</td></tr> <tr><td>30</td><td>和歌山県</td><td>和歌山市</td></tr> <tr><td>31</td><td>鳥取県</td><td>鳥取市</td></tr> <tr><td>32</td><td>島根県</td><td>松江市</td></tr> <tr><td>33</td><td>岡山県</td><td>岡山市</td></tr> <tr><td>34</td><td>広島県</td><td>広島市</td></tr> <tr><td>35</td><td>山口県</td><td>山口市</td></tr> <tr><td>36</td><td>徳島県</td><td>徳島市</td></tr> <tr><td>37</td><td>香川県</td><td>高松市</td></tr> <tr><td>38</td><td>愛媛県</td><td>松山市</td></tr> <tr><td>39</td><td>高知県</td><td>高知市</td></tr> <tr><td>40</td><td>福岡県</td><td>福岡市</td></tr> <tr><td>41</td><td>佐賀県</td><td>佐賀市</td></tr> <tr><td>42</td><td>長崎県</td><td>長崎市</td></tr> <tr><td>43</td><td>熊本県</td><td>熊本市</td></tr> <tr><td>44</td><td>大分県</td><td>大分市</td></tr> <tr><td>45</td><td>宮崎県</td><td>宮崎市</td></tr> <tr><td>46</td><td>鹿児島県</td><td>鹿児島市</td></tr> <tr><td>47</td><td>沖縄県</td><td>那覇市</td></tr> </tbody> </table> </div> </div> </div> </body> </html>
動作結果(変更前)
navの後ろで、テーブルのヘッダ行が固定化されていました(開発ツールで確認)。
改善方法
navのクラスに、"fh-fixedHeader"を追加することで、
navの下にテーブルのヘッダ行が固定化されるようになりました。
<nav class="navbar navbar-inverse navbar-fixed-top fh-fixedHeader"> <div class="nav navbar-brand">Bootstrap3 dataTables Sample Navi</div> </nav>
動作結果(変更後)
まとめ
Bootstrapについて、そこまで詳しくなかったので、勉強になりました。
こうした小さなことであっても、誰かのお役に立てることを信じてアップしておきますね。