Bootstrap テーブルのヘッダーが修正され、位置がずれている場合はどうすればよいですか?それを完全に解決するにはどうすればよいでしょうか？

ブートストラップ-テーブルヘッダーが修正され、位置がずれている場合はどうすればよいですか?どうやって対処すればいいのでしょうか？次の記事では、Bootstrap テーブルのヘッダーの位置がずれている問題を完全に解決する方法を紹介します。

問題の発生

フロントエンドは現在、3 つの主要な VAR フレームワークによって支配されていますが、JQuery Bootstrap を使用するプロジェクトはまだ多くあります。 . .例えば、現在私が担当しているフレームワークは…

こんな感じです ページを下にスクロールして、一番上に到達したときに表のヘッダーを固定するという効果を実現したいプロダクトです。この要件を見たとき、当時の私の気分は、「ああ、とても簡単だ! ^_^Y

」でしたが、実際にメーター ヘッダーが固定されていることに気づいたとき、メーター ヘッダーは実際には曲がっていたことがわかりました。 ！

[関連する推奨事項: "bootstrap チュートリアル "]

Google

テーブルの修正方法 Bootstrap-テーブルヘッド？

 $('#table').bootstrapTable('destroy').bootstrapTable({
    columns: columns,
    data: data,
    pagination: true,
    pageSize: 25,
    pageNumber: 1, //初始化加载第一页，默认第一页
    pageSize: 25, //每页的记录行数（*）
    pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
    fixedColumns: false, // 固定列
    fixedNumber: 0, //固定列数
    height: 800, // <-----固定表头------
});

ヘッダーの修正によって生じる位置ずれの問題を解決するにはどうすればよいですか?参考記事：https://www.wj0511.com/site/detail.html?id=290

記事内では、 $('#table').resize() が指摘されています。 ;和.fht-cell {width: 100px ! important;} の解決策。実際に試しても問題は部分的にしか解決できません。 テーブルヘッダーは全体の境界線を超えませんが、テーブルヘッダーとその下の列は全体としてオフセットされます。

<script>
$(function(){
  $(&#39;#table&#39;).bootstrapTable();
  $(window).resize(function () {
      $(&#39;#table&#39;).bootstrapTable(&#39;resetView&#39;);
  });
})
</script>

要素を検査すると、ヘッダー内の幅制御要素が見つかりました。

幅は 122 に設定されていますが、データの幅と一致しています。これがズレの原因でした。したがって、クラスを fht-cell の幅に直接設定して位置合わせを行うことができます。

.fht-cell{width:120px!important;}

分析計画

• $('#table').resize();実際にテーブルを作成するウィンドウ変更に応じて、サイズも適応のために再計算されます。

• .fht-cell {width: 100px !重要;} は、実際にはヘッダー幅を直接指定することで目的を達成します。全体の幅を制御します。

しかし、上記の 2 つの解決策は、私が遭遇した問題、つまりテーブル ヘッダーとテーブル本体の全体的なオフセットを解決するには十分ではありません。

計画を決定する

CSS プロパティを偶然発見しました: table-layout:fixed;

定義と使用法

tableLayout 属性は、表のセル、行、列のアルゴリズム ルールを表示するために使用されます。

So

table {
  table-layout: fixed;
}

最終計画$('#table').resize(); table-layout :修正済み;

効果の表示

概要

このソリューションは基本的に、テーブルのヘッダーと列が整列している、の使用を実現します。コンテンツは全体の div を超えません。 ただし、各列の幅をカスタマイズできないのが難点で、実際に設定したのですが、機能しませんでした。これが解決すれば、この解決策は完璧になります。

ブートストラップの詳細については、ブートストラップの基本チュートリアルをご覧ください。 ！

以上がBootstrap テーブルのヘッダーが修正され、位置がずれている場合はどうすればよいですか?それを完全に解決するにはどうすればよいでしょうか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。