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

Program / 글쓴이

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

<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>