본문 바로가기

Local Oriented/HTML CSS JS

table 태그에 col 태그를 동적으로 넣을때 유의사항

<table id="idTable"></table> 로 기본 세팅하고,

.ajax 로 안에 있는 데이타를 동적으로 구성할 때..

칼럼별 width 를 일정하게 세팅하려 한다면,

$('#idTable').html(...) 와 같이 세팅하려 할 텐데.

.html() 함수 안에 '<col width="100"><col width="50">...' 내용을 넣으려면 colgroup 태그로 col 태그드을 감싸 주어야 한다.


이를테면,

$('#idTable').html('<col width="100"><col width="50">...<tr><td>...') 와 같이 해서는 col width 가 적용되지 않고 사라진다.

IE 와 Chrome 모두 적용되는 사항이다.


아래와 같이 하면 col width 가 생각했던 것처럼 적용된다.

$('#idTable').html('<colgroup><col width="100"><col width="50">...</colgroup><tbody><tr><td>...</tbody>')

tr 태그들도 tbody 등으로 감싸주면 더 완벽할듯..