質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.77%

DataTables.jsを使ってヘッダー固定。横サイズを可変にする。

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,436

SatokoKugo

score 19

前提・実現したいこと

DataTables.jsを使ってテーブルのヘッダーを固定し、スクロールできるようにした。
画面サイズを変えた時、テーブル幅は自動で伸び縮みするが、
サイドバーを縮ませた時に幅が更新されず、<tbody>部分とずれてしまう。

発生している問題・エラーメッセージ

画面を開いた時の状態↓
サイドバーopen時
サイドバーを縮ませた時↓
サイドバーclose時

該当のソースコード

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>タイトル</title>

        <link href="./css/datatables.min.css" rel="stylesheet" type="text/css" />
        <link href="./css/bootstrap.min.css" rel="stylesheet" type="text/css" />

        <link href="./css/all.min.css" rel="stylesheet" type="text/css" />
        <link href="./css/style.css" rel="stylesheet" type="text/css" />

        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.3/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>

    <body>
        <div class="wrapper">
            <!-- Sidebar Holder -->
            <nav id="sidebar">
                <div class="sidebar-content">
                    <form>
                        <div class="form-group">
                            <div class="clearfix">
                                <label class="pull-left">検索</label>
                                <p class="pull-right">
                                    <a href="2-2.html" class="btn btn-default btn-xs">詳細検索</a>
                                </p>
                            </div>
                            <div class="input-group input-group-sm">
                                <input type="text" class="form-control">
                                <span class="input-group-btn">
                                    <button type="button" class="btn btn-default">検索</button>
                                </span>
                            </div>
                        </div>
                        <div class="history">
                            <p>最近の検索履歴 <button class="btn btn-default btn-xs" type="button">クリア</button></p>
                        </div>
                    </form>
                </div>

                <button type="button" id="sidebarCollapse" class="btn btn-info btn-xs">
                    <i class="fas fa-caret-left"></i>
                </button>
            </nav>
            <!-- Page Content Holder -->
            <div id="content">
                <nav class="navbar navbar-default navbar-fixed-top">
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                                <i class="fas fa-bars"></i>
                            </button>
                        </div>
                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                            <ul class="nav navbar-nav navbar-right">
                                <li><a href="#">トップページ</a></li>
                            </ul>
                        </div>
                    </div>
                </nav>

                <div class="main-area">
                    <div class="row">
                        <div class="col-xs-8">
                            <strong>タイトル</strong>
                        </div>
                        <div class="col-xs-4 text-right">
                            <div class="table-pager">
                                <ul class="pagination">
                                    <li class="disabled">
                                        <a href="#" aria-label="最初のページへ">
                                            <span aria-hidden="true"><i class="fas fa-angle-double-left"></i></span>
                                        </a>
                                    </li>
                                    <li class="disabled">
                                        <a href="#" aria-label="前のページへ">
                                            <span aria-hidden="true"><i class="fas fa-angle-left"></i></span>
                                        </a>
                                    </li>
                                    <li class="active"><a href="#">1</a></li>
                                    <li><a href="#">2</a></li>
                                    <li><a href="#">3</a></li>
                                    <li><a href="#">4</a></li>
                                    <li><a href="#">5</a></li>
                                    <li>
                                        <a href="#" aria-label="次のページへ">
                                            <span aria-hidden="true"><i class="fas fa-angle-right"></i></span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#" aria-label="最後のページへ">
                                            <span aria-hidden="true"><i class="fas fa-angle-double-right"></i></span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <table id="foo-table" class="table table-bordered table-hover" style="width: 100%;">
                        <thead>
                            <tr class="info">
                                <th>あああ</th>
                                <th>いいい</th>
                                <th>ううう</th>
                                <th>えええ</th>
                                <th>おおお</th>
                                <th>かかか</th>
                                <th>ききき</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1234567890</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td><a data-toggle="modal" data-target="#inputModal">abcdefg</a></td>
                                <td></td>
                                <td></td>
                                <td>1</td>
                                <td>くくく</td>
                                <td>けけけ</td>
                                <td>こここ</td>
                            </tr>
                            <tr>
                                <td>ABCDEFG</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>123456789</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>ABCDEFG</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td>ABCDEFG</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>                    
                </div>
            </div>
        </div>        
    </body>

    <!-- SCRIPTS -->
    <script src="./js/jquery-1.12.4.min.js" type="text/javascript"></script>
    <script src="./js/datatables.min.js" type="text/javascript"></script>
    <script src="./js/bootstrap.min.js" type="text/javascript"></script>
</html>
// side ber
$(document).ready(function () {
    $('#sidebarCollapse').on('click', function () {
        $('#sidebar').toggleClass('active');
        $('.collapse.in').toggleClass('in');
        $('a[aria-expanded=true]').attr('aria-expanded', 'false');
    });
});

//data table
$(document).ready(function() {
    $("#foo-table,#foo-table-2").DataTable({
        // 件数切替機能 無効
        lengthChange: false,
        // 検索機能 無効
        searching: false,
        // ソート機能 無効
        ordering: false,
        // ページング機能 無効
        paging: false,
        // スクロールバーを有効にする
        scrollY: 150,
        scrollX: false,
        // 日本語化
        language: {
            info : "_TOTAL_ 件中 _START_ 件から _END_ 件までを表示"
        }
    });
});
.wrapper {
    display: flex;
    width: 100%;
}
/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */
#sidebar,
#sidebar .sidebar-content {
    transition: all 0.3s;
}
#sidebar {
    width: 195px;
}
#sidebar .sidebar-content {
    width: 195px;
    overflow-y: scroll;
    position: fixed;
    top: 20px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background: #F7F7F7;
}
#sidebar.active,
#sidebar.active .sidebar-content {
    margin-left: -195px;
}
/* サイドボタン */
#sidebar #sidebarCollapse {
    position: relative;
    top: 350px;
    left: 195px;
    box-shadow: none;
    outline: none !important;
    border: none;
    z-index: 20;
}
#sidebar.active #sidebarCollapse i::before {
    content: "\f0da";
}
/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */
#content {
    width: calc(100% - 195px);
    padding-left: 15px;
    padding-top: 25px;
    min-height: 100vh;
    transition: all 0.3s;
    position: absolute;
    top: 0;
    right: 0;
}
#sidebar.active + #content {
    width: 100%;
}
/* header */
.navbar {
    background: #4790BB;
    border: none;
    border-radius: 0;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    margin: 0;
    min-height: 20px !important
}
.navbar-toggle {
    padding: 5px 12px;
    margin-right: 0;
    background-color: #fff;
    outline: none !important;
    border: none;
}
/* ---------------------------------------------------
    DATA TABLE STYLE
----------------------------------------------------- */
table.dataTable thead th,
table.dataTable thead td {
    padding: 5px;
    border-bottom: 2px solid #ddd;
}
table.dataTable tbody th,
table.dataTable tbody td {
    padding: 5px;
}
.dataTables_wrapper {
    margin-bottom: 20px;
}
.dataTables_wrapper.no-footer .dataTables_scrollBody {
    border-bottom: none;
}
/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */
@media (max-width: 768px) {
    #sidebar,
    #sidebar .sidebar-content {
        margin-left: -195px;
    }
    #sidebar.active,
    #sidebar.active .sidebar-content{
        margin-left: 0;
    }
    #content {
        width: 100%;
    }
    #sidebar.active + #content {
        width: calc(100% - 195px);
    }
}

試したこと

①テーブルヘッダーのwidthをautoやunsetにしてみたが、はみ出したりしてしまう。
②jsで、再表示(F5)させる。
→モックなので今はないが、
本番環境では、検索結果がテーブルなのでデータが消えてしまう(再検索になる)と思う。

補足情報(FW/ツールのバージョンなど)

DataTables 1.10.18
Bootstrap v3.3.7
Font Awesome Free 5.8.1
jQuery v1.12.4

jsは詳しくないので、説明文もあるとたすかります。
再現(codepen)

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • yasutomi

    2019/05/27 12:48

    質問に記載されたコードでは問題なく表示され
    再現できなかったのでCodePenへの掲載希望。

    キャンセル

  • SatokoKugo

    2019/05/27 14:52

    jsのdataTableをDataTableに変更しました。
    再現UPしました。

    キャンセル

回答 2

check解決した方法

0

window.onload = onLoad;
function onLoad() {
    $('.dataTables_scrollHeadInner,.dataTable').css('width', '');
}


上記js追加で、widthを非表示にしました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

DataTables はあまり使わないので、もっと良い解決方法があるのかもしれませんが。

サイドバー部分をを隠したり出したりする時に、テーブルヘッダー部分の、リサイズ処理が正しく行われていないのかな・・・と思われます。

■ 正攻法っぽい ■
DataTableの列幅を揃える処理を自分で記述する

$(document).ready(function () {
    $('#sidebarCollapse').on('click', function () {
        $('#sidebar').toggleClass('active');
        $('.collapse.in').toggleClass('in');
        $('a[aria-expanded=true]').attr('aria-expanded', 'false');
        $("#foo-table,#foo-table-2").DataTable().columns.adjust().draw();
    });
});

■ ちょっと無理やり ■ 
画面サイズを変えた時は正しく動いているので、そっちのイベントを強制発火させて処理させる

$(document).ready(function () {
    $('#sidebarCollapse').on('click', function () {
        $('#sidebar').toggleClass('active');
        $('.collapse.in').toggleClass('in');
        $('a[aria-expanded=true]').attr('aria-expanded', 'false');
        $(window).trigger('resize');
    });
});

こんな感じにすると、ヘッダー幅はうまく調整されるようです。

※他の部分に影響があるかないかは、別途ご確認くださいネ^^

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/29 17:57

    回答ありがとうございます。
    どちらも試してみたのですが、変わりませんでした。
    $('.dataTables_scrollHeadInner,.dataTable').css('width', ''); でうまくできました。
    ボタンを押した時にではなく、最初から指定するのはどうしたら良いのでしょうか・・・?

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.77%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る