Was soll ich tun, wenn der Bootstrap-Tabellenheader repariert und falsch ausgerichtet ist? Wie kann man es vollständig lösen?

Bootstrap-Was soll ich tun, wenn der Tabellenkopf aufgrund einer Fixierung falsch ausgerichtet ist? Wie kann man es lösen? Im folgenden Artikel erfahren Sie, wie Sie das Problem der Fehlausrichtung der Bootstrap-Tabellen-Header vollständig lösen können.

Es ist ein Problem aufgetreten

Obwohl das Frontend mittlerweile von den drei großen VAR-Frameworks dominiert wird, gibt es immer noch viele Projekte, die JQuery+Bootstrap verwenden. Zum Beispiel das Framework, für das ich derzeit verantwortlich bin ...

Die Situation ist wie folgt: Das Produkt möchte den Effekt erzielen, dass die Seite nach unten gescrollt und der Tabellenkopf fixiert wird, wenn er oben angekommen ist. Als ich diese Anforderung sah, war meine Stimmung damals: Oh, so einfach!^_^Y

Aber als ich tatsächlich den festen Zählerkopf erkannte, stellte ich fest, dass der Zählerkopf tatsächlich schief war? !

【Verwandte Empfehlung: „Bootstrap-Tutorial“】

Google it

Wie repariert man den Header der Bootstrap-Tabelle?

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

Wie kann das durch die Reparatur des Zählerkopfes verursachte Fehlausrichtungsproblem gelöst werden? Referenzartikel: https://www.wj0511.com/site/detail.html?id=290

Der Artikel weist darauf hin, dass $('#table').resize(); und Die Lösung von .fht-cell {width: 100px !important; kann das Problem nur teilweise lösen; Die Kopfzeile ragt nicht über den Gesamtrand hinaus, die Kopfzeile und die darunter liegenden Spalten sind jedoch insgesamt versetzt. $('#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但是我的数据宽度只有100,这才造成了错位。所以可以直接设置class为fht-cell的宽度，达到对齐的目的。

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

分析方案

• 方案中的$('#table').resize();实际上是让表格根据窗口变化时，也重新计算大小以进行适配；

• 方案中的.fht-cell {width: 100px !important;}实际上就是直接指定表头宽度，已达到控制总宽度的目的。

但以上两种方案还不足以解决我遇到的问题：表头与table body整体偏移。

确定方案

偶然发现了一个css属性：table-layout:fixed;

定义和用法

tableLayout 属性用来显示表格单元格、行、列的算法规则。

于是乎

table {
  table-layout: fixed;
}

最终方案$('#table').resize(); + table-layout:fixed;rrreee

Bei der Untersuchung der Elemente haben wir festgestellt, dass das Element, das die Breite im Header steuert

Die Breite ist auf 122 eingestellt, aber die Breite meiner Daten beträgt nur 100, was zu einer Fehlausrichtung führt. Daher können Sie die Klasse direkt auf die Breite der FHT-Zelle einstellen, um eine Ausrichtung zu erreichen.

rrreee

Analyseplan

• $('#table') im Plan .resize();Tatsächlich wird die Größe zur Anpassung auch neu berechnet, wenn sich die Tabelle ändert

• .fht-cell {width: 100px !important ;Tatsächlich wird die Header-Breite direkt angegeben, wodurch der Zweck der Steuerung der Gesamtbreite erreicht wird.

Aber die beiden oben genannten Lösungen reichen nicht aus, um das Problem zu lösen, auf das ich gestoßen bin: den Gesamtversatz von Tabellenkopf und Tabellenkörper.

Bestimmen Sie die Lösung🎜🎜Ich habe versehentlich ein CSS-Attribut entdeckt: table-layout:fixed;🎜🎜🎜Definition und Verwendung Das Attribut 🎜🎜tableLayout wird verwendet, um Algorithmusregeln für Tabellenzellen, Zeilen und Spalten anzuzeigen. 🎜🎜🎜Also🎜rrreee🎜Endgültige Lösung$('#table').resize(); + table-layout:fixed; 🎜 🎜Effektanzeige🎜🎜🎜🎜🎜Zusammenfassung🎜🎜Diese Lösung realisiert grundsätzlich die Ausrichtung der Tabellenüberschrift und der Spalten, wenn die Tabellenüberschrift festgelegt ist und der Inhalt die Gesamtdiv nicht überschreitet; Der Wermutstropfen ist jedoch, dass man die Breite jeder Spalte nicht anpassen kann. Ich habe es tatsächlich eingestellt, aber es hat nicht funktioniert. Wenn dies gelöst ist, ist diese Lösung perfekt. 🎜🎜Weitere Informationen zu Bootstrap finden Sie unter: 🎜Bootstrap-Grundlagen-Tutorial🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonWas soll ich tun, wenn der Bootstrap-Tabellenheader repariert und falsch ausgerichtet ist? Wie kann man es vollständig lösen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!