Q&A
前提・実現したいこと
テーブルの<thead>と<tbody>の<th>をFixedMidashiを使い固定したのですが、
スクロール時に大きくずれてしまいます。
Bootstrapを利用している為それが影響しているのかなと思うのですが原因が見つけられません。
実際に色々試してみたところ画面幅を一回変更する動作をすると<thead>の横幅が再計算されて正しい表示になる状態になっています。
最初から正しい表示にする為に何かいい方法はないでしょうか？
該当のソース
html
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="format-detection" content="telephone=no"> 7 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 8 9 <link rel="stylesheet" href="common/style/style.css" type="text/css" media='all' /> 10 <script type="text/javascript" src="common/js/import.js"></script> 11 <script type="text/javascript" src='common/js/fixed_midashi.js'></script> 12</head> 13 14<body onLoad="FixedMidashi.create();"> 15 <article class="container"> 16 <section class="row"> 17 <div class="col-12"> 18 <div class="col-12 bl_statement mx-auto details-table p-0"> 19 <table _fixedhead='rows:2; cols:1'> 20 <thead> 21 <tr> 22 <th rowspan="2">タイトル１</th> 23 <th colspan="4">タイトル２</th> 24 <th colspan="1">タイトル３</th> 25 <th colspan="8">タイトル４</th> 26 </tr> 27 <tr> 28 <th>テキスト</th> 29 <th>テキスト</th> 30 <th>テキスト</th> 31 <th>テキスト</th> 32 <th>テキスト</th> 33 <th>テキスト</th> 34 <th>テキスト</th> 35 <th>テキスト</th> 36 <th>テキスト</th> 37 <th>テキスト</th> 38 <th>テキスト</th> 39 <th>テキスト</th> 40 <th>テキスト</th> 41 </tr> 42 </thead> 43 <tbody> 44 <tr> 45 <th class="el_bg_gray">テキスト</th> 46 <td>0</td> 47 <td>0</td> 48 <td>0</td> 49 <td>0</td> 50 <td>0</td> 51 <td>0</td> 52 <td>0</td> 53 <td>0</td> 54 <td>0</td> 55 <td>0</td> 56 <td>0</td> 57 <td>0</td> 58 <td>0</td> 59 </tr> 60 <tr> 61 <th class="el_bg_gray">テキスト</th> 62 <td>0</td> 63 <td>0</td> 64 <td>0</td> 65 <td>0</td> 66 <td>0</td> 67 <td>0</td> 68 <td>0</td> 69 <td>0</td> 70 <td>0</td> 71 <td>0</td> 72 <td>0</td> 73 <td>0</td> 74 <td>0</td> 75 </tr> 76 <tr> 77 <th class="el_bg_gray">テキスト</th> 78 <td>0</td> 79 <td>0</td> 80 <td>0</td> 81 <td>0</td> 82 <td>0</td> 83 <td>0</td> 84 <td>0</td> 85 <td>0</td> 86 <td>0</td> 87 <td>0</td> 88 <td>0</td> 89 <td>0</td> 90 <td>0</td> 91 </tr> 92 <tr> 93 <th class="el_bg_gray">テキスト</th> 94 <td>0</td> 95 <td>0</td> 96 <td>0</td> 97 <td>0</td> 98 <td>0</td> 99 <td>0</td> 100 <td>0</td> 101 <td>0</td> 102 <td>0</td> 103 <td>0</td> 104 <td>0</td> 105 <td>0</td> 106 <td>0</td> 107 </tr> 108 <tr> 109 <th class="el_bg_gray">テキスト</th> 110 <td>0</td> 111 <td>0</td> 112 <td>0</td> 113 <td>0</td> 114 <td>0</td> 115 <td>0</td> 116 <td>0</td> 117 <td>0</td> 118 <td>0</td> 119 <td>0</td> 120 <td>0</td> 121 <td>0</td> 122 <td>0</td> 123 </tr> 124 </tbody> 125 </table> 126 </div> 127 </div> 128 </section> 129 </article> 130<body>
css
1 2.details-table{ 3 box-sizing: initial !important; 4} 5 6div.scroll_div { 7 overflow: auto; 8} 9
試したこと
▼CSSの追加
https://qiita.com/nbfujiwara/items/271d04e64f579e8ac1f2
補足情報（FW/ツールのバージョンなど）
Bootstrap4を使っています
自己解決
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。