CSS에서 cellpadding과 cellspacing을 설정 하시겠습니까?

HTML 테이블에서 cellpaddingand cellspacing는 다음과 같이 설정할 수 있습니다.

<table cellspacing="1" cellpadding="1">

CSS를 사용하여 어떻게 동일한 작업을 수행 할 수 있습니까?

기초

CSS에서 " padding셀 패딩"을 제어하기 위해 간단히 테이블 셀에서 사용할 수 있습니다 . 예를 들어 "셀 패딩"10px :

td { 
    padding: 10px;
}

"셀 간격"의 경우 border-spacingCSS 속성을 테이블에 적용 할 수 있습니다 . 예를 들어 "셀 간격"10px :

table { 
    border-spacing: 10px;
    border-collapse: separate;
}

이 숙박 시설은 구식 "간격"으로 할 수없는 별도의 수평 및 수직 간격을 허용합니다.

IE <= 7의 문제

이것은 거의 운이 좋지 않은 Internet Explorer 7을 통해 Internet Explorer를 제외하고 거의 모든 인기있는 브라우저에서 작동합니다. 이 브라우저는 여전히 border-collapse인접한 테이블 셀의 경계를 병합하는 속성을 지원하기 때문에 "거의"라고 말합니다 . 셀 간격 을 제거하려는 경우 (즉, cellspacing="0") border-collapse:collapse동일한 효과를 가져야합니다. 테이블 셀 사이에 공간이 없습니다. 이 지원은 cellspacing테이블 요소 의 기존 HTML 속성을 무시하지 않기 때문에 버그가 있습니다 .

간단히 말해 Internet Explorer 5-7 이외의 브라우저의 경우 border-spacing처리합니다. Internet Explorer의 경우 상황이 옳은 경우 (0 셀 간격을 원하고 테이블에 아직 정의되어 있지 않은 경우)을 사용할 수 있습니다 border-collapse:collapse.

table { 
    border-spacing: 0;
    border-collapse: collapse;
}

참고 : 테이블과 브라우저에 적용 할 수있는 CSS 속성에 대한 훌륭한 개요는이 환상적인 Quirksmode 페이지를 참조하십시오 .

기본

브라우저의 기본 동작은 다음과 같습니다.

table {border-collapse: collapse;}
td    {padding: 0px;}

셀 패딩

셀의 내용과 셀 벽 사이의 간격을 설정합니다

table {border-collapse: collapse;}
td    {padding: 6px;}

세포 간격

테이블 셀 사이의 공간을 제어합니다

table {border-spacing: 2px;}
td    {padding: 0px;}

양자 모두

table {border-spacing: 2px;}
td    {padding: 6px;}

둘 다 (특별)

table {border-spacing: 8px 2px;}
td    {padding: 6px;}

참고 :border-spacing 설정되어 있으면 border-collapse테이블의 속성이 separate입니다.

직접 해보십시오!

여기에서 이것을 달성하는 오래된 HTML 방법을 찾을 수 있습니다.

table
{
    border-collapse: collapse; /* 'cellspacing' equivalent */
}

table td, table th
{
    padding: 0; /* 'cellpadding' equivalent */
}

테이블 셀에 여백을 설정해도 실제로 아는 한 효과가 없습니다. 에 해당하는 실제 CSS cellspacing는 border-spacing-이지만 Internet Explorer에서는 작동하지 않습니다.

border-collapse: collapse언급 한대로 셀 간격을 안정적으로 0으로 설정 하는 데 사용할 수 있지만 다른 값의 경우 브라우저 간 유일한 방법은 cellspacing속성 을 계속 사용하는 것입니다.

이 핵은 Internet Explorer 6 이상, Chrome , Firefox 및 Opera에서 작동합니다 .

table {
    border-collapse: separate;
    border-spacing: 10px; /* cellspacing */
    *border-collapse: expression('separate', cellSpacing = '10px');
}

table td, table th {
    padding: 10px; /* cellpadding */
}

*선언은 Internet Explorer 6 및 7이고, 다른 브라우저는 제대로을 무시합니다.

expression('separate', cellSpacing = '10px')returns 'separate'하지만 JavaScript에서 예상 한 것보다 많은 인수를 전달할 수 있으므로 모든 명령문이 평가되므로 두 명령문이 모두 실행됩니다.

셀 간격 값이 0이 아닌 사람들을 위해 다음 CSS가 효과적이지만 Firefox에서만 테스트 할 수 있습니다.

호환성에 대한 자세한 내용 은 다른 곳에 게시 된 Quirksmode 링크를 참조 하십시오. 이전 Internet Explorer 버전에서는 작동하지 않을 수 있습니다.

table {
    border-collapse: separate;
    border-spacing: 2px;
}

이 문제에 대한 간단한 해결책은 다음과 같습니다.

table
{
    border: 1px solid #000000;
    border-collapse: collapse;
    border-spacing: 0px;
}
table td
{
    padding: 8px 8px;
}

또한, 원하는 경우 cellspacing="0", 추가하는 것을 잊지 마세요 border-collapse: collapse당신에 table의 스타일 시트.

셀의 내용을 div로 감싸면 원하는 모든 것을 할 수 있지만 균일 한 효과를 얻으려면 열의 모든 셀을 감싸 야합니다. 예를 들어, 왼쪽 및 오른쪽 여백을 넓히려면 다음을 수행하십시오.

CSS는

div.cellwidener {
  margin: 0px 15px 0px 15px;
}
td.tight {
  padding: 0px;
}

<table border="0">
  <tr>
    <td class="tight">
      <div class="cellwidener">My content</div>
    </td>
  </tr>
</table>

예, 번거 롭습니다. 예, Internet Explorer에서 작동합니다. 사실, Internet Explorer에서만 이것을 테스트했습니다. 이것이 우리가 직장에서 사용할 수있는 전부이기 때문입니다.

그냥 사용하는 border-collapse: collapse테이블을 위해, 그리고 padding에 대한 th나 td.

이 스타일을위한 테이블에 대한 전체 재설정 - 의 cellpadding , cellspacing 와 국경 .

내 reset.css 파일 에이 스타일이 있습니다.

table{
    border:0;          /* Replace border */
    border-spacing: 0px; /* Replace cellspacing */
    border-collapse: collapse; /* Patch for Internet Explorer 6 and Internet Explorer 7 */
}
table td{
    padding: 0px; /* Replace cellpadding */
}

사실은. CSS에 대한 모든 흥분에 cellpadding="0" cellspacing="0"대해 더 이상 사용되지 않기 때문에 사용할 수도 있습니다 ...

의 마진을 제안하는 다른 사람 <td>은 분명히 이것을 시도하지 않았습니다.

table th,td {
    padding: 8px 2px;
}
table {
    border-collapse: separate;
    border-spacing: 2px;
}

테이블 데이터에 CSS 패딩 규칙을 사용하면됩니다.

td { 
    padding: 20px;
}

테두리 간격의 경우 :

table { 
    border-spacing: 1px;
    border-collapse: collapse;
}

그러나 상자 모델의 diff 구현으로 인해 Internet Explorer와 같은 이전 버전의 브라우저에서는 문제가 발생할 수 있습니다.

내가 W3C 분류에서 이해 <table>하는 것은 데이터를 '전용'으로 표시하기위한 것입니다.

나는 그것이 훨씬 쉽게 만들 발견을 바탕으로 <div>배경을 가진 모든 것을하고 데이터가 사용 위에 떠있는 테이블이 position: absolute;와 background: transparent;...

Chrome, Internet Explorer (6 이상) 및 Mozilla Firefox (2 이상)에서 작동합니다.

여백은 컨테이너 요소 등의 사이에 스페이서를 만드는 데 사용 (또는 어쨌든 의미)되어 <table>, <div>및 <form>,하지 <tr>, <td>, <span>또는 <input>. 컨테이너 요소 이외의 용도로 사용하면 향후 브라우저 업데이트를 위해 웹 사이트를 조정하는 데 바쁠 수 있습니다.

CSS :

selector{
    padding:0 0 10px 0; // Top left bottom right 
}

CSS 패딩 속성을 사용하여 테이블 셀 안에 패딩을 쉽게 설정할 수 있습니다. 테이블의 cellpadding 속성과 동일한 효과를 생성하는 유효한 방법입니다.

table,
th,
td {
  border: 1px solid #666;
}

table th,
table td {
  padding: 10px;
  /* Apply cell padding */
}

<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <title>Set Cellpadding in CSS</title>

</head>

<body>

  <table>
    <thead>
      <tr>
        <th>Row</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Clark</td>
        <td>Kent</td>
        <td>clarkkent@mail.com</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>peterparker@mail.com</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>johnrambo@mail.com</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

마찬가지로 CSS border-spacing 속성을 사용하여 cellspacing 특성과 같은 인접한 표 셀 테두리 사이의 간격을 적용 할 수 있습니다. 그러나 테두리 간격을 설정하려면 border-collapse 속성 muse의 값이 분리됩니다. 이것이 기본값입니다.

table {
  border-collapse: separate;
  border-spacing: 10px;
  /* Apply cell spacing */
}

table,
th,
td {
  border: 1px solid #666;
}

table th,
table td {
  padding: 5px;
  /* Apply cell padding */
}

<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <title>Set Cellspacing in CSS</title>

</head>

<body>

  <table>
    <thead>
      <tr>
        <th>Row</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Clark</td>
        <td>Kent</td>
        <td>clarkkent@mail.com</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>peterparker@mail.com</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>johnrambo@mail.com</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

이 시도:

table {
    border-collapse: separate;
    border-spacing: 10px;
}
table td, table th {
    padding: 10px;
}

또는 이것을 시도하십시오 :

table {
    border-collapse: collapse;
}
table td, table th {
    padding: 10px;
}

나는 !important국경 붕괴 후처럼 사용했다.

border-collapse: collapse !important;

그리고 그것은 IE7에서 저에게 효과적입니다. cellspacing 속성을 재정의하는 것 같습니다.

<table>
    <tr>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

cell-padding에 의해 제공 될 수 padding있는 동안 CSS에 cell-spacing설정하여 설정할 수 있습니다 border-spacing테이블.

table {
    border-spacing: 10px;
}
td {
    padding: 10px;
}

바이올린 .

td {
    padding: npx; /* For cellpadding */
    margin: npx; /* For cellspacing */
    border-collapse: collapse; /* For showing borders in a better shape. */
}

경우 margin작동하지 않았다, 설정하려고 display의 tr에 block다음 이익률은 작동합니다.

표의 경우 셀 간격과 셀 공간은 HTML 5에서 더 이상 사용되지 않습니다.

이제 셀 간격을 사용하려면 테두리 간격을 사용해야합니다. 셀 패딩에는 border-collapse를 사용해야합니다.

그리고 이것을 HTML5 코드에서 사용하지 않아야합니다. 항상 CSS 3 파일에서이 값을 사용하십시오.

table {
    border-spacing: 4px; 
    color: #000; 
    background: #ccc; 
}
td {
    padding-left: 4px;
}

HTML 테이블에서 cellpaddingand cellspacing는 다음과 같이 설정할 수 있습니다.

대한 세포 패딩 :

간단한 td/th셀을 호출하십시오 padding.

예:

/******Call-Padding**********/

table {
    border-collapse: collapse;
}

td {
  border: 1px solid red;
  padding: 10px;
}

<table>
        <tr>
            <th>Head1 </th>
            <th>Head2 </th>
            <th>Head3 </th>
            <th>Head4 </th>
        </tr>
        <tr>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
            <td>33</td>
            <td>34</td>
        </tr>
        <tr>
            <td>41</td>
            <td>42</td>
            <td>43</td>
            <td>44</td>
        </tr>
    </table>

table {
    border-collapse: collapse;
}

td {
  border: 1px solid red;
  padding: 10px;
}

대한 세포 간격

간단하게 불러 table border-spacing

예:

/********* Cell-Spacing   ********/
table {
    border-spacing: 10px;
    border-collapse: separate;
}

td {
  border: 1px solid red;
}

<table>
        <tr>
            <th>Head1</th>
            <th>Head2</th>
            <th>Head3</th>
            <th>Head4</th>
        </tr>
        <tr>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
            <td>33</td>
            <td>34</td>
        </tr>
        <tr>
            <td>41</td>
            <td>42</td>
            <td>43</td>
            <td>44</td>
        </tr>
    </table>

/********* Cell-Spacing   ********/
table {
    border-spacing: 10px;
    border-collapse: separate;
}

td {
  border: 1px solid red;
}

CSS 소스 별 더 많은 표 스타일 링크 여기에서 CSS 별 더 많은 표 스타일 을 얻을 수 있습니다 .

CSS에서 border-spacingand를 사용하여 이와 같이 간단하게 할 수 있습니다 padding.

table {
  border-collapse: collapse;
}

td, th {
  padding: 1em;
  border: 1px solid blue;
}

<table>
  <tr>
    <th>head_1</th>
    <th>head_2</th>
    <th>head_3</th>
    <th>head_4</th>
  </tr>
  <tr>
    <td>txt_1</td>
    <td>txt_2</td>
    <td>txt_3</td>
    <td>txt_4</td>
  </tr>
</table>

스타일을 테이블 자체에 직접 추가하는 것은 어떻습니까? 이것은 tableCSS에서 사용 하는 대신 페이지에 여러 테이블이있는 경우 BAD 접근 방식입니다.

<table style="border-collapse: separate;border-spacing: 2px;">
    <tr>
        <td style="padding: 4px 4px;">Some Text</td>
    </tr>
</table>

나는 이것이 특정 테이블의 모든 셀에 영향을 줄 것을 제안합니다.

table.tbl_classname td, th {
    padding: 5px 5px 5px 4px   ;
 }

아래 코드를 확인하여 a를 index.html만들고 실행하십시오.

<!DOCTYPE html>
<html>
   <head>
      <style>
         table{
         border-spacing:10px;
         }
         td{
         padding:10px;
         }
      </style>
   </head>
   <body>
      <table cellspacing="0" cellpadding="0">
         <th>Col 1</th>
         <th>Col 2</th>
         <th>Col 3</th>
         <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
         </tr>
      </table>
   </body>
</html>

출력 :