Bootstrap-table 헤더가 고정되어 있고 잘못 정렬되어 있으면 어떻게 해야 합니까? 완전히 해결하는 방법은 무엇입니까?

부트스트랩 - 테이블 헤더가 고정으로 인해 어긋나면 어떻게 해야 하나요? 어떻게 해결하나요? 다음 글에서는 부트스트랩 테이블 헤더 정렬 문제를 완벽하게 해결하는 방법을 소개하겠습니다. 도움이 되셨으면 좋겠습니다!

문제 발생

현재 프런트엔드는 3대 VAR 프레임워크가 지배하고 있지만 JQuery+Bootstrap을 사용하는 프로젝트는 여전히 많습니다. 예를 들어 제가 현재 담당하고 있는 프레임워크는...

상황은 이렇습니다. 제품에서 페이지를 아래로 스크롤하고 상단에 도달하면 테이블 헤더를 고정하는 효과를 구현하려고 합니다. 이 요구사항을 봤을 때 당시 내 기분은 '아, 참 쉽다!^_^Y

그런데 실제로 고정된 미터 헤더를 깨달았을 때 미터 헤더가 실제로 비뚤어져 있었다는 걸 발견했다. !

【관련 추천: "bootstrap tutorial"】

Google it

Bootstrap-table의 헤더를 수정하는 방법은 무엇인가요?

 $('#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로 설정되어 있지만 내 데이터의 너비는 100에 불과하여 정렬 오류가 발생하는 것을 발견했습니다. 따라서 클래스를 fht-cell의 너비로 직접 설정하여 정렬할 수 있습니다.

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

분석 계획

• $('#table').resize();은 실제로 창에 따라 테이블이 변경될 때 적응을 위한 크기를 다시 계산할 수 있도록 합니다 ;

  솔루션의 li>$('#table').resize();实际上是让表格根据窗口变化时，也重新计算大小以进行适配；

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

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

确定方案

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

定义和用法

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

于是乎

table {
  table-layout: fixed;
}

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

.fht-cell {width: 100px !important;}는 실제로 헤더 너비를 직접 지정하여 전체 너비를 제어하는 ​​목적을 달성합니다.

그러나 위의 두 가지 솔루션으로는 제가 직면한 문제인 테이블 헤더와 테이블 본문의 전체 오프셋을 해결하는 데 충분하지 않습니다.

해결책 결정

실수로 CSS 속성 table-layout:fixed;

정의 및 사용법을 발견했습니다. >

tableLayout 속성은 테이블 셀, 행 및 열에 대한 알고리즘 규칙을 표시하는 데 사용됩니다.

🎜So🎜rrreee🎜최종 해결 방법$('#table').resize(); + table-layout:fixed; 🎜 🎜효과 표시🎜🎜🎜🎜🎜요약🎜🎜이 솔루션은 기본적으로 테이블 헤더가 고정된 경우 테이블 헤더와 열의 정렬을 구현하고 내용이 전체 div를 초과하지 않습니다. 하지만 문제는 각 열의 너비를 맞춤 설정할 수 없다는 것입니다. 실제로 설정했지만 작동하지 않았습니다. 이것이 해결된다면 이 솔루션은 완벽할 것입니다. 🎜🎜부트스트랩에 대한 자세한 내용을 보려면 🎜부트스트랩 기본 튜토리얼🎜을 방문하세요! ! 🎜

위 내용은 Bootstrap-table 헤더가 고정되어 있고 잘못 정렬되어 있으면 어떻게 해야 합니까? 완전히 해결하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!