> 웹 프론트엔드 > HTML 튜토리얼 > thead와 td를 정렬할 수 없으면 어떻게 해야 합니까?

thead와 td를 정렬할 수 없으면 어떻게 해야 합니까?

零下一度
풀어 주다: 2017-07-17 16:38:27
원래의
2408명이 탐색했습니다.

툴바의 표시/숨기기 열을 사용할 때 표의 열 헤더와 내용이 정렬되지 않는 문제가 종종 발생합니다.

인터넷에서 다음과 같은 두 가지 처리 방법을 찾았습니다.

1. 옵션에서 높이를 제거하고 완벽한 정렬을 얻습니다. 그러나 데이터가 많아지면 테이블이 자동으로 높이를 늘려 표시합니다. 스크롤하지 않고 모든 데이터.

2. 다음 두 줄을 주석 처리하세요

//this.resetHeader();
//padding += this.$header.outerHeight();
로그인 후 복사

완벽하게 정렬되지만 테이블 헤더를 고정할 수 없게 됩니다.

이 두 가지 결과 모두 케이크를 먹을 수도 없고, 영향을 받는 기능도 매우 바람직합니다.

문제의 의심되는 원인은 열 축소 과정에서 나머지 열의 너비를 설정했지만 열을 축소한 후 남은 너비를 채우는 경우 계산상의 문제가 있다는 것입니다.

결국 참고를 위해 다음 방법을 채택했습니다.

열 중 하나의 너비를 자동으로 채우도록 설정하지 마십시오. 다음 코드는

        <thead><tr><th data-field="Code" data-width="105px">编号</th><th data-field="Name" data-switchable="false">姓名</th><th data-field="Sex" data-width="120px">性别</th><th data-field="Age" data-width="120px">年龄</th><th data-field="School" data-width="30px">学校</th></tr></thead>
로그인 후 복사

이런 식입니다. , 이름이 제거되지 않는 한 다른 열은 제거됩니다. 정렬 문제가 발생하지 않습니다. 이 열이 제거되는 것을 방지하려면 data-switchable="false"

을 추가하십시오. 종종 너비 자동 채우기가 필요한 열이 더 나은 솔루션입니다.

위 내용은 thead와 td를 정렬할 수 없으면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿