PHPでDBからデータを取得し、smarty経由でテーブルを作成し、
datatables(表)に変換してデータを表示したいのですが、
ヘッダー部とデータ部の表示がずれてしまいます。
ヘッダー部のセルが左に寄せられ、データ部は領域の中央にセルが寄せられて表示されます。
ためしに、下記関数を追加したのですが、それでもずれて表示されます。
table.columns.adjust();
大変困っています。解決方法はありますでしょうか。
※コードは一部を抜粋しています。
css
1@charset "UTF-8"; 2 3* { 4 //初期化 5 padding : 0px ; 6 margin : 0px ; 7 -webkit-box-sizing: border-box; 8 -moz-box-sizing: border-box; 9 -o-box-sizing: border-box; 10 -ms-box-sizing: border-box; 11 box-sizing: border-box; 12 /* font-size: 14px; */ 13} 14 15#wrapper { 16 width : 100% ; 17 border: 1px solid #FF9900; 18 margin: 5px auto; 19} 20 21#contents { 22 display: flex; 23} 24 25#side_menue_l { 26 width : 15% ; 27 border: 1px solid #FF9900; 28} 29 30#main { 31 font-size: 14px; 32 width : 85% ; 33 min-height: 650px; 34 border: 1px solid #FF9900; 35} 36 37#contents_search{ 38 width: 100%; 39 overflow: hidden; 40 background-color:#a9c6af; 41} 42 43#contents_result{ 44 width: 100%; 45 overflow: hidden; 46} 47 48#tbl_result { 49 white-space: nowrap; /* 横幅のMAXに達しても改行しない */ 50} 51 52/* テーブルデータ 右寄せ */ 53#tbl_result td.td_right{ 54 text-align:right; 55} 56 57#tbl_result tr:hover{ 58 background-color: #eecfcf;/* ホバー時の行の色 */ 59} 60 61#tbl_result_wrapper .dataTables_scrollHead{ 62 background-color: #54a85d; 63} 64 65#contents_result_split_1{ 66 width: 60%; 67 float: left; 68 overflow: hidden; 69 /* visibility:hidden; */ 70} 71#contents_result_split_2{ 72 width: 40%; 73 float: right; 74 background-color: #bb82b5; 75 overflow: hidden; 76 /* visibility:hidden; */ 77} 78
tplファイル
1<!DOCTYPE html> 2<html lang="ja"> 3 {* ヘッダファイル読み込み。title変数を渡す *} 4 {include file='head.tpl' title='WEB' include_js_file='cht0010_res.js'} 5 6 <body> 7 <div id="wrapper"> 8 {* ヘッダーファイル(body内)読み込み。 *} 9 {include file='header.tpl'} 10 11 <div id="contents"> 12 {* サイドメニューファイル(左側)読み込み。 *} 13 {include file='side_menue_l.tpl'} 14 15 {* ここにページの内容を記述 *} 16 <div id="main"> 17 <div id="contents_search"> 18 <h3>検索条件</h3> 19 <ul> 20 <li>売上基準年:{$uri_yyyy}年 </li> 21 <li>品番:{$hin_cd} 品名:{$hin_nm} </li> 22 <li>定価:{$tanka}円 </li> 23 </ul> 24 </div> 25 26 <div id="contents_result"> 27 <h3>検索結果</h3> 28 <div> 29 <!-- グラフ用キャンバス要素 --> 30 <canvas id="graph" height="350px" width="450px"></canvas> 31 <!-- <canvas id="graph"></canvas> --> 32 </div> 33 {*$results|@var_dump*} 34 <div id="contents_result_split_1"> 35 <table id="tbl_result" class="stripe compact cell-border" > 36 <thead> 37 <tr> 38 <th>売上年</th> 39 <th>売上数量</th> 40 <th>売上合計</th> 41 <th>粗利合計</th> 42 <th>粗利率</th> 43 </tr> 44 </thead> 45 <tbody> 46 {foreach from = $results item = row} 47 <tr> 48 <td class="s_year" class="td_right"><span>{$row.s_year}</span></td> 49 <td class="sum_suryo" class="td_right"><span>{$row.sum_suryo}</span></td> 50 <td class="sum_kingaku" class="td_right"><span>{$row.sum_kingaku}</span></td> 51 <td class="sum_arari" class="td_right"><span>{$row.sum_arari}</span></td> 52 <td class="araritu" class="td_right"><span>{$row.araritu}</span></td> 53 </tr> 54 {/foreach} 55 </tbody> 56 </table> 57 </div> 58 <div id="contents_result_split_2"> 59 test右 60 </div> 61 </div> 62 </div> 63 {* サイドメニューファイル(右側)読み込み。 *} 64 {*include file='side_menue_r.tpl'*} 65 </div> 66 {* フッタファイル読み込み *} 67 {include file='footer.tpl'} 68 </div> 69 </body> 70</html> 71
javascript
1window.onload = function() { 2 var table = $("#tbl_result").DataTable({ 3 // 件数切替機能 無効 4 lengthChange: false, 5 // 検索機能 無効 6 searching: false, 7 // ソート機能 無効 8 ordering: false, 9 // 情報表示 無効 10 info: false, 11 // ページング機能 無効 12 paging: false, 13 14 scrollX: true, 15 // 縦スクロールバーを有効にする (scrollYは200, "200px"など「最大の高さ」を指定します) 16 scrollY: 400, 17 }); 18 table.columns.adjust(); 19}; 20

回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/11/06 03:39