Apakah yang perlu saya lakukan jika pengepala Jadual Bootstrap dibetulkan dan tidak sejajar? Bagaimana untuk menyelesaikannya sepenuhnya?

Bootstrap-Apakah yang perlu saya lakukan jika pengepala jadual dibetulkan dan tidak sejajar? Bagaimana untuk menyelesaikannya? Artikel berikut akan memperkenalkan kepada anda cara menyelesaikan sepenuhnya masalah salah jajaran pengepala jadual Bootstrap Saya harap ia akan membantu anda!

Menghadapi masalah

Walaupun bahagian hadapan kini dikuasai oleh tiga rangka kerja VAR utama, masih terdapat banyak projek yang menggunakan JQuery Bootstrap . Sebagai contoh, rangka kerja yang saya bertanggungjawab pada masa ini...

Situasinya adalah seperti ini. Produk ingin mencapai kesan menatal ke bawah halaman dan membetulkan pengepala jadual apabila ia mencapai bahagian atas . Apabila saya melihat keperluan ini, perasaan saya pada masa itu ialah: Oh, sangat mudah! ^_^Y

Tetapi apabila saya benar-benar menyedari pengepala meter tetap, saya mendapati bahawa pengepala meter sebenarnya bengkok? !

[Cadangan berkaitan: "tutorial bootstrap"]

Google it

Cara membetulkan Bootstrap- kepala meja meja?

 $('#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, // <-----固定表头------
});

Bagaimana untuk menyelesaikan masalah salah jajaran yang disebabkan oleh membetulkan kepala meter? Artikel rujukan: https://www.wj0511.com/site/detail.html?id=290

Artikel tersebut menunjukkan penyelesaian $('#table').resize(); dan .fht-cell {width: 100px !important;} selepas benar-benar mencubanya , saya hanya boleh menyelesaikan sebahagian masalah; Pengepala tidak melebihi sempadan keseluruhan, tetapi pengepala dan lajur di bawah diimbangi secara keseluruhan.

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

Dengan memeriksa elemen, kami mendapati bahawa elemen kawalan lebar dalam pengepala

Di sini lebar ditetapkan kepada 122 tetapi lebar data saya hanya 100 , ini menyebabkan terkehel. Oleh itu, anda boleh terus menetapkan kelas kepada lebar sel-fht untuk mencapai penjajaran.

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

Skim analisis

• $('#table').resize(); dalam skema sebenarnya membenarkan jadual mengira semula saiz untuk penyesuaian apabila ia berubah mengikut tetingkap . ;

• .fht-cell {width: 100px !important;} dalam skema sebenarnya secara langsung menentukan lebar pengepala, yang mencapai tujuan mengawal jumlah lebar.

Tetapi kedua-dua penyelesaian di atas tidak mencukupi untuk menyelesaikan masalah yang saya hadapi: offset keseluruhan pengepala jadual dan badan jadual.

Tentukan penyelesaian

Saya secara tidak sengaja menemui atribut css: table-layout:fixed;

Definisi dan penggunaan

tableLayout atribut Peraturan algoritma yang digunakan untuk memaparkan sel jadual, baris dan lajur.

Jadi

table {
  table-layout: fixed;
}

Pelan akhir$('#table').resize(); table-layout:fixed;

Paparan kesan

Ringkasan

Penyelesaian ini pada asasnya mencapai penjajaran pengepala jadual dan lajur apabila pengepala jadual ditetapkan dan kandungannya tidak melebihi div keseluruhan; Tetapi lalat dalam salap adalah bahawa anda tidak boleh menyesuaikan lebar setiap lajur Malah, saya menetapkannya, tetapi ia tidak berfungsi. Jika ini diselesaikan, maka penyelesaian ini akan menjadi sempurna.

Untuk pengetahuan lanjut tentang bootstrap, sila lawati: tutorial asas bootstrap! !

Atas ialah kandungan terperinci Apakah yang perlu saya lakukan jika pengepala Jadual Bootstrap dibetulkan dan tidak sejajar? Bagaimana untuk menyelesaikannya sepenuhnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!