DataTablesのヘッダーとデータがずれる

あるサイトのサンプルプログラムをそのまま実行しているのですが、
DataTablesのヘッダー部とデータ部がずれてしまいます。

JavaScriptでtable.columns.adjust();を呼び出していますが、
それでも調整されません。
すいませんが、よろしくお願いします。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="utf-8">
6  <link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
7  <link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.2.1/css/fixedColumns.dataTables.min.css">
8  <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
9  <script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
10  <script src="https://cdn.datatables.net/fixedcolumns/3.2.1/js/dataTables.fixedColumns.min.js"></script>
11  <script src="test5.js" type="text/javascript"></script>
12</head>
13
14<body>
15
16
17<table id="example" class="stripe row-border order-column">
18        <thead>
19            <tr>
20                <th>First name</th>
21                <th>Last name</th>
22                <th>Position</th>
23                <th>Office</th>
24                <th>Age</th>
25            </tr>
26        </thead>
27        <tbody>
28            <tr>
29                <td>Tiger</td>
30                <td>Nixon</td>
31                <td>System Architect</td>
32                <td>Edinburgh</td>
33                <td>61</td>
34            </tr>
35            <tr>
36                <td>Garrett</td>
37                <td>Winters</td>
38                <td>Accountant</td>
39                <td>Tokyo</td>
40                <td>63</td>
41            </tr>
42            <tr>
43                <td>Ashton</td>
44                <td>Cox</td>
45                <td>Junior Technical Author</td>
46                <td>San Francisco</td>
47                <td>66</td>
48            </tr>
49            <tr>
50                <td>Cedric</td>
51                <td>Kelly</td>
52                <td>Senior Javascript Developer</td>
53                <td>Edinburgh</td>
54                <td>22</td>
55            </tr>
56            <tr>
57                <td>Airi</td>
58                <td>Satou</td>
59                <td>Accountant</td>
60                <td>Tokyo</td>
61                <td>33</td>
62            </tr>
63            <tr>
64                <td>Brielle</td>
65                <td>Williamson</td>
66                <td>Integration Specialist</td>
67                <td>New York</td>
68                <td>61</td>
69            </tr>
70            <tr>
71                <td>Herrod</td>
72                <td>Chandler</td>
73                <td>Sales Assistant</td>
74                <td>San Francisco</td>
75                <td>59</td>
76            </tr>
77            <tr>
78                <td>Rhona</td>
79                <td>Davidson</td>
80                <td>Integration Specialist</td>
81                <td>Tokyo</td>
82                <td>55</td>
83            </tr>
84            <tr>
85                <td>Colleen</td>
86                <td>Hurst</td>
87                <td>Javascript Developer</td>
88                <td>San Francisco</td>
89                <td>39</td>
90            </tr>
91        </tbody>
92    </table>
93  </body>
94  </html>
95

JavaScript
1$(document).ready(function() {
2    var table = $('#example').DataTable( {
3        scrollY:        "300px",
4        scrollX:        true,
5        paging:         false,
6        fixedColumns:   {
7            leftColumns: 2
8        }
9    } );
10    table.columns.adjust();
11} );
12

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

回答2件

ベストアンサー

scrollX: true,
が何か悪さしてるようなんですが
こちらは必要な感じですか？
パラメータの見直しをするとちゃんと行くと思います。

投稿2018/11/06 04:27

ms5025

総合スコア292

susumu_0414

2018/11/06 05:10

回答ありがとうございます。そうなんです。 scrollXを設定するとこの現象が起こるのですが、このパラメータは使いたいのです。列の幅は取得するデータ長により可変となるため、横幅が要素を超える場合はスクロールバーを表示してやりたいのです。

ms5025

2018/11/06 05:59

jquery.dataTables.min.css で table.dataTable{ width:100%; margin:0 auto; clear:both; border-collapse:separate; border-spacing:0 } となっていて、 margin:0 auto; でセンタリングされてるぽいんですよね F12でこのcss切ってみると左詰めになりました。 jsで後から table（id:example) のcss、　margin:0 auto;をremoveしてみたらどうなりますか？

susumu_0414

2018/11/06 07:36

ありがとうございます。下記処理を入れるとズレが解消できました！ // datatablesのヘッダーとデータ部がズレるため、マージンの調整 $('#tbl_result').css('margin-left','0px');

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