CSS에서 셀 패딩 및 셀 간격을 설정하시겠습니까?

질문자 :kokos

HTML 테이블에서 cellpadding 및 cellspacing 은 다음과 같이 설정할 수 있습니다.

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

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

기초

CSS에서 "cellpadding"을 제어하기 위해 단순히 테이블 셀에 padding 예: "cellpadding"의 10px:

 td { padding: 10px; }

"cellspacing"의 경우 border-spacing CSS 속성을 테이블에 적용할 수 있습니다. 예: "cellspacing"의 10px:

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

이 속성은 구식 "cellspacing"으로는 할 수 없었던 별도의 수평 및 수직 간격을 허용합니다.

IE ≤ 7의 문제

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

간단히 말해서 Internet Explorer 5-7이 아닌 브라우저의 경우 border-spacing 처리됩니다. Internet Explorer의 경우 상황이 적절하다면(0 cellspacing을 원하고 테이블에 이미 정의되어 있지 않은 경우) border-collapse:collapse 사용할 수 있습니다.

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

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

Eric Nguyen

기본

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

 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 방법을 찾을 수 있습니다.

user669677

table { border-collapse: collapse; /* 'cellspacing' equivalent */ } table td, table th { padding: 0; /* 'cellpadding' equivalent */ }

Pup

내가 아는 한 표 셀에 여백을 설정하는 것은 실제로 아무런 효과가 없습니다. cellspacing 해당하는 진정한 CSS는 border-spacing . 하지만 Internet Explorer에서는 작동하지 않습니다.

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

Will Prescott

이 해킹은 Internet Explorer 6 이상, Google 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') 은 'separate' 반환하지만 두 명령문이 모두 실행됩니다. JavaScript에서 예상보다 많은 인수를 전달할 수 있고 모든 인수가 평가되기 때문입니다.

Vitalii Fedorenko

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

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

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

Malvineous

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

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

George Filippakos

cellspacing="0" 을 원하면 table 의 스타일시트에 border-collapse: collapse 를 추가하는 것을 잊지 마십시오.

mat

셀의 내용을 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에서만 테스트했습니다. 왜냐하면 그것이 우리가 직장에서 사용할 수 있는 전부이기 때문입니다.

Robert White

테이블에 대해 border-collapse: collapse 를 사용 th 또는 td padding 을 사용하십시오.

Dan

이 스타일은 테이블(cellpadding , cellspacing 및 border )에 대한 전체 재설정을 위한 것 입니다.

내 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 */ }

Elad Shechter

사실은. CSS를 사용하는 모든 경우에는 더 이상 사용되지 않기 때문에 cellpadding="0" cellspacing="0"

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

corrector

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

Abhishek Singh

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

 td { padding: 20px; }

그리고 테두리 간격의 경우:

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

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

suraj rawat

W3C 분류에서 내가 이해한 바에 따르면 <table> 은 '오직' 데이터를 표시하기 위한 것입니다.

이를 바탕으로 배경과 그 모든 것을 <div> position: absolute; 및 background: transparent; ...

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

<table> , <div> 및 <form> , <tr> , <td> , <span> 또는 <input> 과 같은 컨테이너 요소 사이에 스페이서를 만드는 데 사용됩니다. 컨테이너 요소 이외의 다른 용도로 사용하면 향후 브라우저 업데이트를 위해 웹사이트를 조정하느라 바쁠 것입니다.

RolanDecoy

CSS:

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

suraj rawat

CSS padding 속성을 사용하여 테이블 셀 내부의 패딩을 쉽게 설정할 수 있습니다. 테이블의 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-spacing이 작동하려면 border-collapse 속성의 값을 별도로 지정해야 합니다. 이는 기본값입니다.

 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>

Rafiqul Islam

이 시도:

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

또는 다음을 시도하십시오.

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

Falguni Panchal

나는 border-collapse 후에 !important 사용했습니다.

 border-collapse: collapse !important;

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

Håkan Nilsson

<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 은 CSS에서 padding 으로 주어질 수 있고 cell-spacing 은 table의 border-spacing 을 설정하여 설정할 수 있습니다.

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

바이올린 .

user379888

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

margin 이 작동하지 않으면 tr display 를 block 으로 설정하면 여백이 작동합니다.

Majid Sadr

테이블의 경우 셀 간격 및 셀 패딩은 HTML 5에서 더 이상 사용되지 않습니다.

이제 cellspacing의 경우 border-spacing을 사용해야 합니다. 그리고 cellpadding을 위해서는 border-collapse를 사용해야 합니다.

HTML5 코드에서 이것을 사용하지 않도록 하십시오. 항상 CSS 3 파일에서 이 값을 사용하십시오.

Pushp Singh

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

user6781634

HTML 테이블에서 cellpadding 및 cellspacing 은 다음과 같이 설정할 수 있습니다.

셀 패딩의 경우 :

td/th cell 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로 더 많은 테이블 스타일을 얻을 수 있습니다.

MD Ashik

border-spacing 및 padding 사용하여 CSS에서 다음과 같이 간단히 할 수 있습니다.

 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>

Alireza

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>

출력:

Amaresh Tiwari

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

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

vapcguy

이것은 나를 위해 일했습니다.

 table {border-collapse: collapse} table th, table td {padding: 0}

Muhammad Tahseen ur Rehman

나는 이것을 제안하고 특정 테이블의 모든 셀이 영향을 받습니다.

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

Greggo

HTML5 호환 방식으로 테이블에 10px "cellpadding" 및 15px "cellspacing"을 할당하고 싶다고 가정해 보겠습니다. 여기서는 정말 유사한 출력을 제공하는 두 가지 방법을 보여 드리겠습니다.

두 가지 다른 CSS 속성 집합이 테이블의 동일한 HTML 마크업에 적용되지만 개념은 반대입니다.

• 첫 번째는 border-collapse ( separate )에 border-spacing 을 사용하여 셀 간격을 제공합니다.

• 두 번째는 border-collapse 를 collapse border 속성을 셀 간격으로 사용합니다.

두 경우 모두 cellpadding은 padding:10px 를 td 에 할당하여 이루어지며 두 경우 모두에 background-color 는 더 명확한 데모를 위한 것입니다.

첫 번째 방법:

 table{border-spacing:15px} td{background-color:#00eb55;padding:10px;border:0}

 <table> <tr> <td>Header 1</td><td>Header 2</td> </tr> <tr> <td>1</td><td>2</td> </tr> <tr> <td>3</td><td>4</td> </tr> </table>

두 번째 방법:

 table{border-collapse:collapse} td{background-color:#00eb55;padding:10px;border:15px solid #fff}

 <table> <tr> <td>Header 1</td><td>Header 2</td> </tr> <tr> <td>1</td><td>2</td> </tr> <tr> <td>3</td><td>4</td> </tr> </table>

MattAllegro

출처 : 여기를 클릭하세요

출처 : http:www.stackoverflow.com/questions/339923/set-cellpadding-and-cellspacing-in-css