DataTables でテーブル幅を修正する方法

テーブルに多くの列がある場合、デフォルトの 100% 幅は適切ではなくなり、テーブルの幅を固定する必要がある場合があります。デフォルトの幅は 100% です。ウィンドウサイズを 100% に変更したい場合は、table 要素に width="100%" を追加します。 100% の CSS が有効にならない理由は不明です。データテーブルの固定幅を設定する方法について説明します。

1.html コード

<div id="tableArea"><table id="userTable" class="display table table-bordered" cellspacing="0" ><thead><tr><th style="display: none">ck</th><th>序号</th><th>账号</th><th>姓名</th><th>CPID</th><th>CP名称</th><th>操作</th></tr></thead></table></div>

2. 特定のスタイルをオーバーライドします (スタイルは優先度が高いため、組み込みスタイルをオーバーライドします)

#tableArea .dataTables_wrapper {position: relative;clear: both;zoom: 1;overflow-x: auto;
}#tableArea table{width: 800px;
}

overflow-x:auto ここは new であり、それを示しますテーブルの内容が幅を超えると、水平スクロール バーが表示されます。テーブルの幅はハードコーディングする必要があり、テーブル要素に直接書き込んでも効果がありません。その理由は不明です。

3. 列幅を設定します (オプション)

"columns": [

　　　　{ "data": "number", "orderable": false ,,"searchable": false}
]

4. ブラウザを実行すると、ブラウザ ウィンドウが 800 ピクセル未満の場合、テーブルに水平スクロール バーが表示されます。まさに私たちが望む結果です。

5. "scrollX":true 設定を使用して水平スクロール バーを実装してみてはいかがでしょうか?レンダリングされた Web ページをクエリすると、テーブルが 2 つのテーブルに分割されており、1 つはテーブル ヘッダーを表し、もう 1 つはテーブル本体を表していることがわかりました。これは私が望むものではなく、ヘッダーの内容を超えると非表示になります。

以上がDataTables でテーブル幅を修正する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。