반응형

퍼블리싱 3

[CSS/html] 테이블 헤드 고정하고 스크롤 하는 방법. table with fixed thead and scrollable tbody

테이블 헤드 고정 바디 스크롤 테이블을 만들면서 데이터 리스트들을 뿌려줄때 페이징 처리가 아니라, 스크롤 형태의 테이블을 만들고 싶은데, 일반적으로 만들면 테이블 전체에 스크롤이 적용됩니다. 아래의 방법으로 만들면 헤드부분은 고정되며 리스트로 뿌려진 데이터들만 스크롤이 적용됩니다. 모든 브라우저 공통 작동하는 코드 단점이라면 css 코드가 길어진다는 단점 CSS HTML Table Header 1 Table Header 2 Table Header 3 Data1111111111111111111111111 Data Data Data Data2222222222222222222222222 Data Data Data Data3333333333333333333333333 Data Data Data Data Data..

프로그래밍/CSS 2020.06.30

[CSS] checkbox 사이즈 조절(네모 크기 늘리기)

checkbox 사이즈(크기) 조절 방법 첫 번째 방법 input[type=checkbox] { -ms-transform: scale(2); /* IE */ -moz-transform: scale(2); /* FF */ -webkit-transform: scale(2); /* Safari and Chrome */ -o-transform: scale(2); /* Opera */ padding: 10px; } 두 번째 방법 input[type="checkbox"]{ width: 30px; /*Desired width*/ height: 30px; /*Desired height*/ cursor: pointer; -webkit-appearance: none; appearance: none; } 세 번째 방법 in..

프로그래밍/CSS 2020.06.20

[CSS] 테이블(table)에 스크롤 기능 만들기

테이블 스크롤 기능 table 태그를 만들어서 작업하다보면 반응형에서 문제를 일이큽니다. 크기는 줄어드는데, 테이블의 데이터들 때문에 넓어지고나 늘어나거나 길어지곤 합니다. 이럴 때 테이블에 가로 또는 세로 스크롤 기능을 사용하면 됩니다. 순서 div 하위에 table 생성 div에 width 값이나 height 값을 지정 overflow 속성을 사용하여 스크롤 여부 속성을 지정 필수 : table 에 white-space:nowrap; 적용 물론 테이블 마다 사용법이 다르겠지만 , 일반적으로 정보 전달을 위한 테이블 요소인데, 정보의 내용이 많다면 nowrap를 사용하여 줄바꿈을 막아주어야 테이블이 깨지지 않고 올바르게 보여지게 됩니다. /*해당 범위를 벗어나지 않으면 그대로 표시하고, 벗어나면 스크롤..

프로그래밍/CSS 2020.06.14
반응형