상단의 테이블 헤더가 아래 컬럼과 맞지 않을 때

아래의 스크린샷은 이해를 바람.

 

중요한것은 빨간박스의 컬럼헤드를 보면 됨

 

 

이게 원본 테이블이다 모자이크는 이해바람

 

---

 

화면의 해상도가 안맞거나 줄어들때 

 

데이터테이블의 사이즈가 변경되는데

 

아래처럼 헤드는 같이 움직이지 않고 지정된 해상도에 맞게 처리된다.

 

하지만 아래의 스크린샷은 컬럼에만 적용되는 스크롤바가 생겨서 넘어가게 되어 결과적으로 테이블의 헤더와 바디의 컬럼이 맞지 않게 되는 현상이 생겨서 상당히 불편하게 된다. 재수가 없다 ㄹㅇ; 불편 그자체다.

확대버전

---

이렇게 스크롤 바를 당기면 컬럼 내용과 맞지 않게 된다.

ㅇㅇ

이걸 아래의 컬럼내용의 사이징을 줄이지 않고 바디 컬럼과 같이 움직이게

== 헤드도 스크롤바를 당겼을 때 같이 움직이게 만들자.

 

스크롤바를 우측으로 댕겼을 때

 

---

데이터 테이블을 사용했을 시

dataTables_scrollHeadInner 라는 class가 생성되는데

 

이 클래스를 drawCallback에서 remove 시켜서 dataTables_scrollHead라고 설정을 하는 방법과

 

dataTables_scrollHeadInner css 를 수정하는 방법으로 고쳐보자.

 

내장함수가 있는것 같은데 헷갈린다.

 

dataTables_scrollHeadInner

 

.dataTables_scrollHeadInner {
width: 100% !important;
}

라는 css가 있을것이다.

width를 주석 처리 해버리면?

 

헤더가 같이 움직이는 테이블이 생성된다.ㅇㅇ

하나 더 있는데 비밀임ㅇㅇ

---

 

 

다른 스크린샷과 비교해보면 정렬되어 헤드가 따라오는걸 볼 수 있다.

 

굿?