Q&A
まずPHPなしでモックで作れてますか？
bootstrap＆phpでサイト制作しております。
テーブル部分は、DataTablesを使用しております。
列が比較的沢山あり、横にスクロールするテーブルを作成したいのですが、スクロールされません。
横のスクロールバーは出ますが、一ページにギュっと収まってしまいます…
コードは以下のサイトを参考に、DataTablesを設定するScriptで、
scrollX: true, columnDefs: [ { targets: "wide", width: 500 } ]
をセットしましたが、横にスクロールされません・・・
参考：https://qiita.com/nissuk/items/7ac59af5de427c0585c5
（width:500の500は仮です）
以下、コードです。
detail.php
<?php //ファイル名の取得からサイドバーのurl取得 省略 //c-activeの取得 省略 //テーブル内のデータを取得 省略 ?> <!DOCTYPE html> <html lang="ja"> <?php print($layout_head); ?> <body class="c-app"> <?php print($layout_side); ?> <div class="c-wrapper c-fixed-components"> <?php print($layout_header); ?> <div class="c-body"> <main class="c-main"> <div class="container-fluid"> <div class="fade-in"></div> <div class="row"> <div class="col-md-6"> <div class="mb-4"> <h1 class="HalfSingle">13：確認テスト</h1> </div> </div> <div class="col-md-4 offset-md-2 mb-4"> <div class="card"> <div class="card-body"> <div> <span class="badge badge-success">Status</span> <?php h(get_callsetstatus($callset_status, $callset_yoyakudate)); ?> </div> <div class="mt-1"> <span class="badge badge-success">Scenario</span> <?php h($scenario_name); ?> </div> <div class="mt-1"> <span class="badge badge-success">StartTime</span> <?php h($callset_starttime); ?> </div> <div class="mt-1"> <span class="badge badge-success">Retry</span> <?php h(get_interval($callset_intervalhour, $callset_maxretry)); ?> </div> </div> </div> </div> </div> <div class="error" id="result"></div> <div class="table-responsive mb-4 mod-tbl" style="overflow-x: scroll;"> <table class="table table-hover" id="tbl_base" style="width: 100%;"> <thead> <tr> <th>#</th> <th>拠点名</th> <th>電話番号</th> <th>ステータス</th> <th></th> <th>日時</th> <th>回数</th> <th>秒数</th> <th class="wide">メモ</th> <?php for($n = 0; $n <= $question_num-1; $n++): ?> <th class="wide"><?php h("Q" . ($n+1) . "." . $arr_question[$n]); ?></th> <th></th> <?php endfor; ?> <th></th> </tr> </thead> <tbody> <?php if($records): for($i = 0; $i <= $callbases_num-1; $i++): ?> <tr title="<?php h($arr_callbase_name[$i]); ?>"> <td><?php h($arr_callbase_num[$i]); ?></td> <td><?php h($arr_callbase_name[$i]); ?></td> <td><?php h($arr_callbase_number[$i]); ?></td> <td><?php h(get_callbasestatus($arr_callbase_status[$i])); ?></td> <td><?php h($arr_callbase_detail[$i]); ?></td> <td><?php h(get_time($arr_callbase_calledat[$i])); ?></td> <td><?php h($arr_callbase_callenum[$i]); ?></td> <td><?php h($arr_callbase_second[$i]); ?></td> <td><?php h($arr_callbase_memo[$i]); ?></td> <?php for($n = 0; $n <= $question_num-1; $n++): ?> <td><?php h($arr_base_answer[$i][$n]); ?></td> <td><a href="<?php h($arr_base_path[$i][$n]); ?>" target="blank"><?php if(strlen($arr_base_path[$i][$n]) >0){print("音声");} ?></a></td> <?php endfor; ?> <td><button type="button" onclick="location.href='edit.php?id=<?php h($rec_one["id"]); ?>'" class="btn btn-pill btn-block btn-primary">編集</button></td> </tr> <?php endfor; endif; ?> </tbody> </table> </div> </div> </main> <footer class="c-footer"> <div class="ml-auto">Powered by BaseCall</div> </footer> </div> </div> <!-- CoreUI tooltips--> <script src="../../core_assets/js/tooltips.js"></script> <!-- CoreUI and necessary plugins--> <script src="../../core_assets/vendors/@coreui/coreui/js/coreui.bundle.min.js"></script> <!--[if IE]><!--> <script src="../../core_assets/vendors/@coreui/icons/js/svgxuse.min.js"></script> <!--<![endif]--> <!--追記--> <script defer src="https://use.fontawesome.com/releases/v5.2.0/js/all.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!--datatablesのcdn--> <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.18/r-2.2.2/datatables.min.js"></script> <script> //DataTables $(document).ready( function () { $.extend($.fn.dataTable.defaults, { language: { url: "https://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Japanese.json" } }); $("#tbl_base").DataTable({ scrollX: true, "searching" : false, "pagingType": "simple_numbers", "ordering" : false, columnDefs: [ { targets: "wide", width: 500 } ] }); } ); </script> </body> </html>
css（テーブルに対しては得に設定していませんが…）
html { height: 100%; font-size: 15px !important; } body { height: 100%; margin: 0; font-family: 'Lato', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif !important; color: #494949; background: #ffffff !important; } h1 { font-size: 28px !important; font-weight: bold !important; } h4 { color: #A08ACF; } .side-title { color: #ffffff; font-size: 20px; } .side-title-sm { font-size: 20px; }
どのようにすれば横スクロールされるか、アドバイスいただけますと幸いです。
よろしくお願いいたします。
回答2件
0
コードを見た感じだと、HTMLに直接書いている、style指定が原因なのでは？と思いました。
style="width: 100%;"
<table class="table table-hover" id="tbl_base" style="width: 100%;">
検証をしたわけではないので、間違っていたらご容赦を^^;
投稿2020/08/11 01:49
総合スコア1910
あ。回答書いてる間に解決されてましたね。
失礼しました！
いえいえ、すみません、ありがとうございます！
0
自己解決
<div class="table-responsive mb-4 mod-tbl" style="overflow-x: scroll;"> <table class="table table-hover" id="tbl_base" style="width: 100%;">
の、
style="overflow-x: scroll;" style="width: 100%;"
を削除しましたらスクロールされました。お騒がせしました・・・
投稿2020/08/11 01:45
総合スコア227
CSSフレームワーク利用するのであればなおのことインラインスタイルは避けるべきと思います。
採用する場合は必要性を十分に検討することです。
あなたの回答
tips
プレビュー
