IE에서 table의 tr,td를 display:block으로 주었을때 문제점
모두가람
대략 이런 테이블을 만들었습니다.
table id=itemtable
tr class=itemhead
th class=thumbnail사진/th
th class=itemname메뉴 이름/th
th class=itemnum1kg당 개수(마리)/th
th class=itemprice가격/th
/tr
tr class=item1
td class=thumbnailimg1/td
td class=itemname전복 소/td
td class=itemnum1kg당 20~30마리/td
td class=itemprice39,000/td
/tr
tr class=item2
td class=thumbnailimg2/td
td class=itemname전복 중/td
td class=itemnum1kg당 15~19마리/td
td class=itemprice45,000/td
/tr
tr class=item3
td class=thumbnailimg3/td
td class=itemname전복 대/td
td class=itemnum1kg당 10~14마리/td
td class=itemprice55,000/td
/tr
tr class=item4
td class=thumbnailimg4/td
td class=itemname전복 특대/td
td class=itemnum1kg당 7~9마리/td
td class=itemprice69,000/td
/tr
tr class=item5
td class=thumbnailimg5/td
td class=itemname전복 종합/td
td class=itemnum다양한 크기/td
td class=itemprice50,000/td
/tr
tr class=item6
td class=thumbnailimg6/td
td class=itemname전복 소/td
td class=itemnum /td
td class=itemprice일반 : 8,000br /후식 : 4,000/td
/tr
/table이렇게 하면 테이블이 아래와 같이 나옵니다.
이놈의 배치를 좀 바꾸려고 css를 이렇게 정의 했습니다.
table{
display:block;
border:0;
padding:0;
margin:0;
}
td, th{
display:block;
}
tr{
display:block;
position:absolute;
width:190px;
height:210px;
}
.itemhead{
display:none;
}
.item1{
top:0;
left:0;
background-color:#aaf;
}
.item2{
top:0;
left:230px;
background-color:#afa;
}
.item3{
top:0;
left:460px;
background-color:#faa;
}
.item4{
top:265px;
left:0;
background-color:#339;
}
.item5{
top:265px;
left:230px;
background-color:#393;
}
.item6{
top:265px;
left:460px;
background-color:#933;
}
그러면 ie를 제외한 브라우저는 제가 의도한데로 표시를 합니다.이렇게 되야 정상일텐데.. ie에서는 ie특유의 table해석 철학때문에 아래와 같이 나옵니다..애초에 table의 구조를 바꾸려는 제가 이상한 놈일까요? 아니면 ie는 답이 없는걸까요?
ie에서 저걸 해결할 수 있는 방법은 없을까요?