CSS에서 테이블 패딩을 어떻게 지정합니까?

CSS에서 테이블 패딩을 어떻게 지정합니까? (셀 패딩이 아닌 표)

---

배경색이있는 표가 있고 표와 그 내용, IE 셀 사이에 패딩을 지정해야합니다.
테이블 태그가 패딩 값을 허용하지 않는 것 같습니다.
Firebug는 패딩 0으로 테이블과 tbody의 레이아웃을 표시하지만 입력 된 값을 허용하지 않으므로 패딩 속성이없는 것 같습니다.
하지만 문제는 표 상단이있는 상단 셀과 표 하단이있는 하단 셀과 동일한 셀 분리를 원한다는 것입니다.
다시 말하지만 내가 원하는 것은 셀 패딩이 아닙니다.

편집 : 감사합니다, 내가 정말로 필요로했던 것은 테두리 간격 또는 html에 상응하는 셀 간격이었습니다.
하지만 어떤 이유로 그들은 내가 작업중인 사이트에서 아무것도하지 않습니다.
둘 다 별도의 HTML에서 훌륭하게 작동하지만 사이트에서는 그렇지 않습니다.
나는 그것이 속성을 덮어 쓰는 어떤 스타일 일 수 있다고 생각했지만 셀 간격과 인라인 테두리 간격은 덮어 쓰면 안됩니다.
(나는 firefox를 사용합니다)

편집 2 : 아니요, TD 패딩은 내가 필요한 것이 아닙니다. TD 패딩을 사용하면 인접한 셀의 상단 및 하단 패딩이 합산되므로 상단 셀과 테이블 상단 테두리 사이보다 두 셀 사이의 공간 (실제로 패드)이 두 배가됩니다. 나는 그들 사이에 정확히 같은 거리를 갖고 싶다.

---

가장 쉽고 가장 잘 지원되는 방법은 <table cellspacing="10">

CSS 방식 : 테두리 간격 (IE에서 지원하지 않는 것 같습니다)

    <!-- works in firefox, opera, safari, chrome -->
    <style type="text/css">
    
    table.foobar {
    	border: solid black 1px;
    	border-spacing: 10px;
    }
    table.foobar td {
    	border: solid black 1px;
    }
    
    
    </style>
    
    <table class="foobar" cellpadding="0" cellspacing="0">
    <tr><td>foo</td><td>bar</td></tr>
    </table>

편집 : 셀 내용을 채우고 간격을 두지 않으려면 간단히 사용할 수 있습니다.

<table cellpadding="10">

또는

td {
    padding: 10px;
}

---

테이블 여백을 설정할 수 있습니다. 또는 테이블을 div로 래핑하고 div의 패딩을 사용합니다.

---

테이블에 대해 이해해야 할 사항은 다음과 같습니다. 테이블은 중첩 된 독립 요소의 트리가 아닙니다. 그것들은 단일 복합 요소입니다. 개별 TD는 CSS 블록 요소와 비슷하게 작동하지만 중간 항목 (TR 및 TBODY를 포함하여 TABLE과 TD 사이의 모든 것)은 나눌 수 없으며 인라인 또는 블록에 속하지 않습니다 . 다른 차원 공간에서는 임의의 HTML 요소가 허용되지 않으며 이러한 다른 차원 공간의 크기는 CSS를 통해 전혀 구성 할 수 없습니다. HTML cellspacing속성 만 얻을 수 있으며 해당 속성은 CSS와 유사하지 않습니다.

따라서 문제를 해결하기 위해 다른 포스터에서 제안하는 것처럼 DIV 래퍼를 제안하거나 테이블에 반드시 포함해야하는 경우 다음과 같은 추악한 쓰레기가 있습니다.

<style>
    .padded tr.first td { padding-top:10px; }
    .padded tr.last td { padding-bottom:10px; }
    .padded td.first { padding-left:10px; }
    .padded td.last { padding-right:10px; }
</style>

<table class='padded'>
    <tr class='first'>
        <td class='first'>a</td><td>b</td><td class='last'>c</td>
    </tr>
    <tr>
        <td class='first'>d</td><td>e</td><td class='last'>f</td>
    </tr>
    <tr class='last'>
        <td class='first'>g</td><td>h</td><td class='last'>i</td>
    </tr>
</table>

---

당신은 할 수 없습니다 ... 아마도 원하는 효과의 사진을 게시했다면 그것을 달성하는 다른 방법이있을 것입니다.

예를 들어 전체 테이블을 DIV로 래핑하고 패딩을 div로 설정할 수 있습니다.

---

재밌 네요, 어제 정확히이 일을 했어요. CSS 파일에 필요합니다.

.ablock table td {
     padding:5px;
}

그런 다음 적절한 div에 테이블을 감 쌉니다.

<div class="ablock ">
<table>
  <tr>
    <td>

---

CSS를 사용하면 테이블은 셀과 독립적으로 패딩을 가질 수 있습니다.

padding 속성은 자식에게 상속되지 않습니다.

따라서 정의 :

table {
    padding: 5px;
}

작동해야합니다. 또한 구체적으로 브라우저에 셀을 채우는 방법 (또는이 경우에는 채우지 않음)을 지정할 수 있습니다.

td {
    padding: 0px;
}

편집 : IE8에서 지원되지 않습니다. 죄송합니다.

---

또 다른 트릭이 있습니다.

/* Padding on the sides of the table */
table th:first-child, .list td:first-child { padding-left: 28px; }
table th:last-child, .list td:last-child { padding-right: 28px; }

(현재 직장에서 봤어요)

---

border-spacing 속성을 사용해 볼 수 있습니다. 그것은 당신이 원하는 것을해야합니다. 그러나이 대답 을보고 싶을 수도 있습니다 .

---

CSS doesn't really allow you to do this on a table level. Generally, I specify cellspacing="3" when I want to achieve this effect. Obviously not a css solution, so take it for what it's worth.

---

table {
    border: 1px solid transparent;
}

---

table {
    background: #fff;
    box-shadow: 0 0 0 10px #fff;
    margin: 10px;
    width: calc(100% - 20px); 
}

---

table.foobar
{
   padding:30px; /* if border is not collapsed */
}

or 

table.foobar
{
   border-spacing:0;
}
table.foobar>tbody
{
   display:table;
   border-spacing:0; /* or other preferred */
   border:30px solid transparent; /* 30px is the "padding" */
}

Works in Firefox, Chrome, IE11, Edge.

ReferenceURL : https://stackoverflow.com/questions/1750670/how-do-you-specify-table-padding-in-css-table-not-cell-padding