표 셀 사이의 간격 제어

표 셀 사이의 간격 제어

---

각 셀 사이에 공백이있는 배경색이있는 테이블을 만들려고합니다. 그러나 나는 이것을하는 데 문제가있는 것 같습니다.

td여백 설정을 시도했지만 효과가없는 것 같습니다.

table.myclass td {
    background-color: lime;
    margin: 12px 12px 12px 12px;
}​

패딩으로 동일한 작업을 수행하면 작동하지만 셀 사이의 간격이 없습니다.

누군가 이것을 도와 줄 수 있습니까?

jsFiddle : http://jsfiddle.net/BfBSM/

---

요소 의 border-spacing속성을 사용하여 table셀 사이의 간격을 설정합니다.

이로 border-collapse설정되어 있는지 확인하십시오 separate(또는 각 셀 사이에 간격이있을 수있는 별도의 테두리 대신 각 셀 사이에 단일 테두리가 있음).

---

이 바이올린을 확인하십시오 . border-collapse 및 border-spacing 사용을 살펴보아야합니다. IE에는 몇 가지 단점이 있습니다 (평소처럼). 이것은 이 질문 에 대한 답변 을 기반으로 합니다 .

HTML :

<table class="test">
    <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
    <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
    <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
</table>​

CSS :

table.test td {
    background-color: lime;
    margin: 12px 12px 12px 12px;
    padding: 12px 12px 12px 12px;
}
table.test {
    border-collapse: separate;
    border-spacing: 10px;
    *border-collapse: expression('separate', cellSpacing = '10px');
}

---

작업을 완료하려면

<table cellspacing=12>

작업을 수행하는 것보다 "옳은"방식을 원하면 border-spacing일부 브라우저에서 지원 하는 CSS 속성을 대신 사용할 수 있습니다 .

---

table.test td {
    background-color: lime;
    padding: 12px;
    border:2px solid #fff;border-collapse:separate;
}

---

border-collapse 및 border-spacing을 사용하여 테이블 셀 사이에 공백을 만듭니다. QQping에서 제안한대로 부동 셀을 사용하지 않는 것이 좋습니다.

JSFiddle

참조 URL : https://stackoverflow.com/questions/12585461/controlling-spacing-between-table-cells