datatablesのヘッダーとデータ部の表示がずれる

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件

ベストアンサー

全てのソースを試すことはできなかったのですが、
表示を確かめる為、スタイルをそれぞれタグに直接指定して適用させて表示してみました。
少なくともhtmlレベルではtabele部分にずれは見当たりませんでした。
なのでそれ以外の全体枠か、　js部分に問題がありそうです。

columns.adjust().draw();とかにしてみてもうまくいきませんか？？

js
1 var table = $("#tbl_result").DataTable({
2    // 件数切替機能 無効
3    lengthChange: false,
4    // 検索機能 無効
5    searching: false,
6    // ソート機能 無効
7    ordering: false,
8    // 情報表示 無効
9    info: false,
10    // ページング機能 無効
11    paging: false,
12
13    scrollX: true,
14    // 縦スクロールバーを有効にする (scrollYは200, "200px"など「最大の高さ」を指定します)
15    scrollY: 400,
16  }).columns.adjust().draw();

投稿2018/11/06 01:36

ms5025

総合スコア292

susumu_0414

2018/11/06 03:39

回答ありがとうございます。 table.columns.adjust().draw();に変えてみましたが、改善されませんでした。こちらにソースをシンプルにした内容でもう一度質問していますので、確認してもらえますでしょうか。 https://teratail.com/questions/156289 すいませんがよろしくお願いします。

行動規範の内容に同意します