TBODY 요소 사이에 간격을 두는 방법

다음과 같은 테이블이 있습니다.

<table>
    <tfoot>
        <tr><td>footer</td></tr>
    </tfoot>
    <tbody>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
    </tbody>
</table>

각 tbody 요소 사이에 약간의 간격을두고 싶지만 패딩과 여백은 효과가 없습니다. 어떤 아이디어?

테두리가 없어도 괜찮다면 이것을 시도하십시오.

<style>
table {
  border-collapse: collapse;
}

table tbody {
  border-top: 15px solid white;
}
</style>

<table>
    <tfoot>
        <tr><td>footer</td></tr>
    </tfoot>
    <tbody>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
    </tbody>
</table>

브라우저 지원 요구 사항에 따라 다음과 같이 작동합니다.

tbody::before
{
  content: '';
  display: block;
  height: 15px;

}

사람들은 빈 테이블 요소를 사용하여 페이지를 레이아웃하는 것에 대해 항상 논란의 여지가 있습니다 (이 답변의 반대 투표로 입증 됨). 나는 이것을 알고있다. 그러나 때때로 당신이 " 빠르고 더러운 "방식으로 일할 때 이런 방식으로 사용하는 것이 더 쉽다 .

이전 프로젝트에서 빈 행을 사용하여 테이블 행 그룹을 배치했습니다. 스페이서 행에 자체 CSS 클래스를 할당하고 해당 테이블 행 그룹의 상단 및 하단 여백 역할을하는 해당 클래스의 높이를 정의했습니다.

    .separator{
             height: 50px;
    }

   <table>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>

           <tr class="separator" colspan="2"></tr>

           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>

           <tr class="separator" colspan="2"></tr>

           tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
   </table>

표 셀에 테두리가없는 경우 표의 모든 행에 균등하게 간격을 두는 스타일 시트의 일반적인 셀 또는 행의 높이를 정의 할 수도 있습니다.

tr{
   height: 40px;
}

나는 몇 개의 브라우저에서 행 범위 를 포함하는 존재에서 의사 <tbody>와 함께 여러 개의 간격을 적절하게 배치하는 데 어려움을 겪었습니다 .::before<tr><td>

기본적으로 다음 <tbody>과 같은 구조 가있는 경우 :

<tbody>
    <tr>
        <td>td 1</td>
        <td rowspan"2">td 2</td>
        <td>td 3</td>
        <td>td 4</td>
    </tr>
    <tr>
        <td>td 1</td>
        <td>td 2</td>
        <td>td 4</td>
    </tr>
</tbody>

그리고 다음 ::before과 같이 의사 요소에 CSS를 작성하도록 조언하는 사람을 따릅니다 .

tbody::before
{
    content: '';
    display: block;
    height: 10px;
}

이 테이블 초 이내에 "손실"만드는 ROWSPAN에 영향을 미칠 것입니다 <tr>얼마나 많은 <td>첫 번째에 존재하는 -rowspan합니다.

따라서 누군가 이러한 유형의 문제가 발생하면 해결책은 다음 ::before과 같이 pseudo 스타일 을 지정하는 것입니다.

tbody::before
{
    content: '';
    display: table-row;
    height: 10px;
}

여기 바이올린이 있습니다

다음은 모든 브라우저에서 사용할 수없는 : first-child에 의존하는 또 다른 가능성입니다.

<style>
table {
  border-collapse: collapse;
}

td {
  border: 1px solid black;
}

tbody tr:first-child td {
  padding-top: 15px;
}

</style>

<table>
    <tfoot>
        <tr><td>footer</td></tr>
    </tfoot>
    <tbody>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
    </tbody>
</table>

그냥 설정 display으로 block그것은 작동합니다.

table tbody{
    display:block;
    margin-bottom:10px;
    border-radius: 5px;
}

위에 주어진 모든 답변 중에서 djenson47의 답변 만이 표현과 내용의 분리를 유지 합니다 . 의 단점 축소 국경 모델 방법은 더 이상 테이블의 사용할 수없는 경계 또는 cellspacing 개별 세포를 분리하는 특성을. 이것이 좋은 것이라고 주장 할 수 있고 몇 가지 해결 방법이 있지만 고통이 될 수 있습니다. 그래서 저는 첫 자녀 방법이 가장 우아 하다고 생각합니다 .

또는 TBODY 클래스의 overflow 속성을 "visible"이외의 다른 것으로 설정할 수도 있습니다. 이 방법을 사용하면 분리 된 테두리 모델도 유지할 수 있습니다.

<style>
tbody {
    overflow: auto;
    border-top: 1px solid transparent;
}
</style>
<table>
    <tfoot>
        <tr><td>footer</td></tr>
    </tfoot>
    <tbody>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
    </tbody>
</table>

패딩은 TD에 적용될 수 있으므로 + 기호로 트릭을 수행 할 수 있습니다. 그러면 tbody의 첫 번째 TR의 TD에 상단 패딩을 제공 할 수 있습니다.

// The first row will have a top padding
table tbody + tbody tr td {
    padding-top: 20px;
}

// The rest of the rows should not have a padding
table tbody + tbody tr + tr td {
    padding-top: 0px;
}

"tbody + tbody"를 추가하여 첫 번째 tbody에는 상단 패딩이 없습니다. 그러나 필수는 아닙니다.

내가 아는 한 단점은 없습니다 :), 이전 브라우저를 테스트하지는 않았습니다.

border-spacing테이블 행 그룹이있는 테이블에서 사용 하여 해당 그룹 사이에 공백을 추가 할 수 있습니다. 그러나 나는 어떤 그룹이 간격을두고 있고 어떤 것이 아닌지를 지정하는 방법이 없다고 생각합니다.

<table>
  <thead>
    ...
  </head>
  <tbody>
    ...
  </tbody>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

CSS

table {
  border-spacing: 0px 10px; /* h-spacing v-spacing */
}

새로운 답변

원하는만큼 <tbody>태그를 사용할 수 있습니다 . 나는 지금까지 W3C에서 괜찮다는 것을 몰랐습니다. 내 아래 솔루션이 작동하지 않는다고 말하는 것이 아니라 원하는 작업을 수행하려면 <tbody>태그 클래스를 할당 한 다음 <td>CSS를 통해 개별 태그를 다음과 같이 참조하십시오 .

table tbody.yourClass td {
    padding: 10px;
}

따라서 HTML :

<table> 
<tbody>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
</tbody>
<tbody class="yourClass">    
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
</tbody>
<tbody>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
</tbody>
</table>

그 사람을 밖으로 시도하십시오 :)

오래된 답변

무엇을하든 빈 행을 삽입하지 마십시오.

테이블에 tbody 요소가 1 개 이상 있으면 안됩니다. 할 수있는 일은 <tr>요소 에 class 또는 id 속성을 설정 하고 해당 <td>태그에 패딩을 제공하는 것입니다 .

table {
    border-collapse: collapse;
}

tr.yourClass td {
    padding: 10px;
}

top 및 bottom <tr>의 추가 클래스를 할당하여 각각 상단 또는 하단 패딩 만 수행하도록 할 수도 있습니다.

tr.yourClass.topClass td {
    padding: 10px 0 0 0;
}

tr.yourClass.bottomClass td {
    padding: 0 0 10px 0;
}

HTML에서 <tr>태그는 다음과 같습니다.

<table> 
<tbody>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr class="yourClass topClass"><td>Text</td></tr>
<tr class="yourClass"><td>Text</td></tr>
<tr class="yourClass bottomClass"><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
</tbody>
</table>

도움이 되었기를 바랍니다!

djensen47 답변은 최신 브라우저에서 잘 작동하지만 지적했듯이 IE7에서는 작동하지 않습니다.

이전 브라우저를 지원하기위한이 문제에 대한 해결 방법은 각 셀 내용을 div 안에 래핑하는 것입니다. 그런 다음 여백 상단을 div에 추가하십시오.

<table class="tbl">
<tr></tr>
<tr></tr>
<tr></tr>
<tr><td><div></div></td></tr>
</table>

CSS

.tbl tr td div {
    height:30px;
    margin-top:20px;
}

높이 설정은 div 내부에 사용 된 셀 색상이 텍스트 주위에서 축소되는 것을 방지하기 위해 셀을 최소 30px 높이로 유지합니다. 여백 상단은 전체 행을 더 크게 만들어 원하는 공간을 만듭니다.

직접 해결하려고 시도하면서이 문제를 발견했습니다. <br>닫는 </tbody>태그 바로 앞에 태그 를 넣는 데 성공 했습니다 . 순전히 시각적 인 수정이지만 테스트 한 대부분의 브라우저에서 작동하는 것 같습니다.

<table>
    <tbody>
        <tr>
            <td></td>
        </tr>
        <br>
    </tbody>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>

또한 액세스 할 수 있어야합니다.