본문 바로가기

COL

(5)
크롬에서 colgroup 의 col 속성 중 colspan 과 상기와 같이 했을 때 IE 에선 정상적으로 보여지지만,크롬에선 오른쪽에 공백이 생긴다. col 태그에 사용된 colspan 을 없애고 태그를 8번 사용했더니,더 심각한 오류가 발생함.물론, IE 에선 정상적으로 보임. 그래서 width 속성에 사용된 % 를 없애고,pixel 단위로 계산하여 다시 세팅하자 정상화 됨.크롬에 있는 버그도 상당히 많음.. 크롬에서도 정상적으로 보이는 결과는 아래와 같음.
HTML 로 엑셀 저장시 칼럼을 감추기로 하려면.. HTML 로 엑셀 저장시 칼럼을 감추기로 하려면.. 으로 해당 칼럼을 세팅.그 외에 해당 칼럼의 th 나 td 의 스타일은 손대지 않아도 됨.
table 태그에 col 태그를 동적으로 넣을때 유의사항 로 기본 세팅하고,.ajax 로 안에 있는 데이타를 동적으로 구성할 때..칼럼별 width 를 일정하게 세팅하려 한다면,$('#idTable').html(...) 와 같이 세팅하려 할 텐데..html() 함수 안에 '...' 내용을 넣으려면 colgroup 태그로 col 태그드을 감싸 주어야 한다. 이를테면,$('#idTable').html('......') 와 같이 해서는 col width 가 적용되지 않고 사라진다.IE 와 Chrome 모두 적용되는 사항이다. 아래와 같이 하면 col width 가 생각했던 것처럼 적용된다.$('#idTable').html('......')tr 태그들도 tbody 등으로 감싸주면 더 완벽할듯..
CSS 와 jQuery, table 태그 등을 사용하여 목록 만들기 레이아웃이 아니라, 그리드 형태로 목록을 만들어야 하는 경우 table 태그를 사용하면 편합니다.아래 소개하는 목록은.. 목록의 맨 왼쪽과 맨 오른쪽 세로선이 없어요.가독성을 위해 짝수행에 배경색을 주고, 마우스 커서가 올려진 행에 배경색이 다르게 했어요.각 셀은 중앙정렬을 기본으로 하고 (아직 까지 모든 웹브라우저는 td 의 vertical-align 이 middle), 좌정렬과 우정렬은 클래스를 활용.셀에 입력된 글자가 많아질때 말줄임 표시를 할 수 있도록 세팅 .css 파일@charset "UTF-8" /* 혹시 문자셋 관계로 External CSS 를 사용하지 못한다면 사용 */table.tableList { table-layout:fixed; border-top:2px #EA0000 solid;..
table 태그로 표를 간단하게 (레이아웃 작성용 아닙니다) 칼럼1 칼럼2 칼럼3 칼럼4 칼럼5 칼럼6 값1 값2 값3 값4 값5 값6 값1 값2 값3 값4 값5 값6 table 태그는 width 가 100% 로 설정되므로 table 태그를 포함하는 쪽에서 width 를 적절하게 설정합니다.col 태그는 칼럼 갯수만큼 설정합니다. 여기에서는 폭을 설정하는 용도로만 사용.제목은 th 태그로 설정하고, 본문은 td 태그로 설정합니다.마우스 커서가 올려졌을때 본문 라인의 배경색을 바꾸는 것은 jQuery 로 구현하세요. (아래 내용 참조)td 는 기본적으로 중앙 정렬입니다. 좌정렬이 필요한 경우 class 에 left 를 추가합니다.td 태그의 class 에 dot 를 기술하면 폭을 넘어가는 문자열 대신에 말줄임표(...)가 대치되며,크롬/사파리/오페라/파이어폭스 등에..