Bootstrap 3を使用しています。
条件:1.画面に対してtable横長を変わる。
2.header固定、縦スクロールを設定しています。
下記にコードを書きましたが、うまく動かなかったです。
よろしければ、教えてください。
C列にメッセージが長く入力したら、headerとtdの幅をずれてしまいました。そして、tableの横幅も画面に合わせなかったです。
<div class="container-fluid" > <table id="sampleTable" class="table table-striped table-bordered table-hover" > <thead id="title" class="scrollHead"> <tr class="thead-dark" > <th id="date">A</th> <th id="measured" >B</th> <th id="memo">C</th> </tr> </thead> <tbody id="table_data" class="scrollBody"> <tr> <td id="date">2018/08/19</td> <td id="measured">18.8</td> <td id="memo">Gives you full details your website's visitors, which browsers they're using, the pages they're leaving, what they've searched for, and much more. This service can help identify problems other services may have missed.</td> </tr> <tr> <td id="date">2018/08/14</td> <td id="measured"></td> <td id="memo">error......</td> </tr> <tr> <td id="date">2018/08/10</td> <td id="measured">18.8</td> <td id="memo"></td> </tr> <tr> <td id="date">2018/08/03</td> <td id="measured">18.8</td> <td id="memo"></td> </tr> </table> </div>
CSS
#date,#measured{ width:15%; } #memo{ width:70%; } table#sampleTable { width:100%; margin:0 auto; border-collapse:separate; } thead.scrollHead { display:block; } tbody.scrollBody{ height:400px; overflow-y:scroll; display:block; }