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

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

---

새로운 답변

You can use as many <tbody> tags as you like. I didn't realize that was ok by W3C until now. Not to say my below solution doesn't work (it does), but to do what you're trying to do, assign your <tbody> tags classes and then reference their individual <td> tags through CSS like so:

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

and your HTML thusly:

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

Try that guy out :)

OLD ANSWER

whatever you do, DON'T insert blank rows...

you shouldn't have more than 1 tbody element in your table. what you can do is set the class or id attribute in your <tr> elements and give their corresponding <td> tags padding:

table {
    border-collapse: collapse;
}

tr.yourClass td {
    padding: 10px;
}

You can even assign the top and bottom <tr>'s an additional class so that they only do top or bottom padding, respectively:

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

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

and in your HTML, your <tr> tag would look like this:

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

Hope this helps!

---

djensen47 answer works great for newer browsers, however, as it was pointed out, IE7 it does not work in.

My workaround for this issue to support the older browsers was to wrap each cells contents inside a div. Then add a margin-top to the 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;
}

The height setting keeps the cells at least 30px high to prevent any cell coloring used inside the div from collapsing around the text. The margin-top creates the desired space by making the entire row taller.

---

Came across this while trying to solve it myself. I had success with putting a <br> tag right before the closing </tbody> tag. It is a purely visual fix, but seems to work on most browsers I tested.

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

Should be accessible as well.

참고URL : https://stackoverflow.com/questions/294885/how-to-put-spacing-between-tbody-elements