div 테이블의 셀 간격

각 셀 사이에 4 픽셀 정도의 픽셀 간격이 필요합니다. 회색 머리글에 회색 블록이 아닌 공백을 넣고 싶습니다. 주위를 놀아 보았습니다 (배경 클립 : 패딩 상자, 패딩 : 14px, 여백 등). 그러나 div 테이블의 셀 사이에 몇 픽셀을 배치하는 방법을 알지 못했습니다. 어떻게해야합니까? 문제의div 테이블의 셀 간격

는

데모 http://jsfiddle.net/EJBnm/

<div class="TableBox"> 
    <div> 
     <div>Head</div> <div>Bigger Head</div> <div>Medium</div> 
    </div> 
    <div> 
     <div>First</div> <div>Second</div> <div>Third</div> 
    </div> 
    <div> 
     <div>First</div> <div>Second</div> <div>Third</div> 
    </div> 
    <div> 
     <div>First</div> <div>Second</div> <div>Third</div> 
    </div> 
</div>

CSS :

.TableBox {display: table;} 
.TableBox > div {display: table-row; border-spacing: 5px} 
.TableBox > div >div {display: table-cell; margin: 4px;} 
.TableBox > div:nth-child(even){ color: red; } 
.TableBox > div:nth-child(1){ background-color: #666666; color:white; border-spacing: 15px; background-clip:padding-box; padding: 14px; margin:0 20px}

출처

2013-03-01 BruteCode

+10

표 형식 데이터 용 테이블을 사용하십시오 !!!!!! –

거기에가. 왜 지옥의 무리를 사용합니까? 테이블은 한 가지를 잘합니다 ... 테이블을 만드는 것. 당신이 만들고있는 것입니다. – Leeish

논리적으로 연관된 데이터 격자는 테이블이므로 TABLE 태그를 사용하는 것이 완전히 적합합니다. –

이 <tr>

바이올린 대신 .TableBox 클래스에 border-spacing: 4px;을 추가 http://jsfiddle.net/EJBnm/1/

출처

2013-03-01 22:32:28 Adrift

그를 격려하지 마십시오. – Leeish

@Leeish : 주요 질문에 대한 내 의견을 보지만 ... 내가하고있는 일이 무엇이 잘못 되었습니까? (답은 모두입니까?) - 편집 - 간격과 같은 간단한 것에 대한 참조를 찾기가 어렵습니다 ... – BruteCode

나는 이것을 받아 들일 것이지만 그렇게하지 못합니다. – BruteCode

당신은 u는 수 여백 대신 투명 (또는 흰색 테두리)가 표시됩니다. http://jsfiddle.net/jfsWc/

.TableBox > div >div {display: table-cell; border:4px solid transparent}

출처

2013-03-01 22:34:35 Oliver

div 테이블의 셀 간격

답변

관련 문제