CSS를 사용하여 셀 사이에 공백 (td) 추가

셀의 배경색이 흰색이고 테이블의 배경색이 파란색이므로 셀 사이에 공백이있는 테이블을 추가하려고합니다. 패딩과 여백이 작동하지 않는 것을 쉽게 알 수 있습니다 (에 적용하고 있습니다 td). 셀 내부에만 공간을 추가합니다.

원하는 border-spacing:

<table style="border-spacing: 10px;">

또는 어딘가에 CSS 블록에서 :

table {
  border-spacing: 10px;
}

에서 quirksmode 를 참조하십시오 border-spacing. 그주의 border-spacing아래 IE7과 작동하지 않습니다.

table { 
  border-spacing: 10px; 
} 

내가 제거한 후에 이것은 나를 위해 일했습니다.

border-collapse: separate;

내 테이블 태그에서.

내 것은 :

border-spacing: 10px;
border-collapse: separate;

태그 또는 css 속성에 cellspacing및 cellpadding속성을 사용하는 것이 좋습니다.tableborder-spacing

TABLE 태그의 cellspacing (셀 간 거리) 매개 변수는 정확히 원하는 것입니다. 단점은 x와 y에 모두 사용되는 하나의 값이라는 것입니다. 수직 / 수평으로 다른 간격이나 패딩을 선택할 수 없습니다. CSS 속성도 있지만 널리 지원되지는 않습니다.

cellspcing/ cellpadding/ border-spacing속성이 작동하지 않았다고 가정 하면 다음과 같이 코드를 사용할 수 있습니다.

<div class="form-group">
  <table width="100%" cellspacing="2px" style="border-spacing: 10px;">
    <tr>                        
      <td width="47%">
        <input type="submit" class="form-control btn btn-info" id="submit" name="Submit" />
      </td>
      <td width="5%"></td>
      <td width="47%">
        <input type="reset" class="form-control btn btn-info" id="reset" name="Reset" />
      </td>
    </tr>
  </table>
</div>

테이블 너비를 사용하여 버튼을 분리하고 빈 td를 2 또는 1 %로 만드는 동안 시도하고 성공했습니다.

측면과 상하에 별도의 값을 원하는 경우.

<table style="border-spacing: 5px 10px;">