Cách đặt khoảng cách giữa các phần tử TBODY

Tôi có một bảng như thế này:

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

Tôi muốn đặt một số khoảng cách giữa mỗi phần tử tbody, nhưng phần đệm và lề không có tác dụng. Bất kỳ ý tưởng?

Hãy thử điều này, nếu bạn không ngại không có đường viền.

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

Một cái gì đó như thế này sẽ hoạt động, tùy thuộc vào yêu cầu hỗ trợ trình duyệt của bạn:

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

}

Mọi người sẽ luôn có những ý kiến ​​tranh cãi về việc sử dụng các phần tử bảng trống để bố trí một trang (bằng chứng là phản đối của câu trả lời này). Tôi nhận ra điều này, nhưng đôi khi nó dễ sử dụng chúng hơn theo cách này khi bạn đang làm việc theo cách " nhanh chóng và bẩn thỉu ".

Tôi đã sử dụng các hàng trống trong các dự án trước đây để tạo không gian cho các nhóm hàng trong bảng. Tôi đã gán cho các hàng đệm một lớp css của riêng chúng và xác định chiều cao cho lớp đó hoạt động như một lề trên và dưới cho nhóm các hàng trong bảng đó.

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

Nếu bạn không có đường viền trên các ô trong bảng của mình, bạn cũng có thể xác định chiều cao cho ô hoặc hàng điển hình trong biểu định kiểu của mình để tạo khoảng cách đều tất cả các hàng trong bảng của bạn.

tr{
   height: 40px;
}

Tôi đã gặp sự cố khi sắp xếp đúng nhiều khoảng cách <tbody>với ::beforegiả, khi có <tr>chứa <td>với rowspan trong một vài trình duyệt.

Về cơ bản, nếu bạn có <tbody>cấu trúc như thế này:

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

Và bạn theo dõi ai khuyên viết css trên ::beforephần tử giả như thế này:

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

Điều này sẽ ảnh hưởng đến sải hàng, làm cho bảng "mất" trong giây thứ hai có <tr>bao nhiêu <td>sải rộng trong bảng đầu tiên.

Vì vậy, nếu bất kỳ ai gặp phải loại vấn đề đó, giải pháp là tạo kiểu ::beforegiả theo cách này:

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

Đây là một trò đùa

Đây là một khả năng khác dựa vào: đứa trẻ đầu tiên không có sẵn trong tất cả các trình duyệt:

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

Chỉ cần đặt displaylà blockvà nó sẽ hoạt động.

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

Trong tất cả các câu trả lời được đưa ra ở trên, chỉ có câu trả lời của djenson47 giữ được sự tách biệt giữa trình bày và nội dung . Hạn chế của mô hình biên giới sụp đổ phương pháp là bạn không còn có thể sử dụng của bảng biên giới hoặc cellspacing thuộc tính để tách các tế bào riêng lẻ. Bạn có thể lập luận rằng đây là một điều tốt, và có một số cách giải quyết, nhưng nó có thể là một nỗi đau. Vì vậy, tôi nghĩ rằng phương pháp sinh con đầu lòng là thanh lịch nhất.

Ngoài ra, bạn cũng có thể đặt thuộc tính tràn của lớp TBODY thành bất kỳ thứ gì khác ngoài "hiển thị". Phương pháp này cũng cho phép bạn giữ lại mô hình đường viền được phân tách:

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

Bởi vì padding có thể được áp dụng cho TD, bạn có thể thực hiện một mẹo với dấu +. Sau đó, sẽ có thể cung cấp một phần đệm trên cùng cho TD của TR đầu tiên của tbody:

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

Tôi đã thêm "tbody + tbody" nên tbody đầu tiên sẽ không có phần đệm trên cùng. Tuy nhiên, nó không bắt buộc.

Theo như tôi biết thì không có nhược điểm :), mặc dù đã không thử nghiệm các trình duyệt cũ hơn.

Bạn có thể sử dụng border-spacingtrong một bảng với các nhóm hàng trong bảng để thêm khoảng cách giữa các nhóm đó. Mặc dù vậy, tôi không nghĩ có cách nào để chỉ định nhóm nào là khoảng cách và nhóm nào không.

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

CSS

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

CÂU TRẢ LỜI MỚI

Bạn có thể sử dụng bao nhiêu <tbody>thẻ tùy thích. Tôi đã không nhận ra rằng điều đó là ổn bởi W3C cho đến bây giờ. Không có nghĩa là giải pháp dưới đây của tôi không hoạt động (nó có), nhưng để làm những gì bạn đang cố gắng làm, hãy gán <tbody>các lớp thẻ của bạn và sau đó tham chiếu các <td>thẻ riêng lẻ của chúng thông qua CSS như vậy:

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

và HTML của bạn do đó:

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

Hãy thử anh chàng đó đi :)

CÂU TRẢ LỜI CŨ

bất cứ điều gì bạn làm, ĐỪNG chèn các hàng trống ...

bạn không nên có nhiều hơn 1 phần tử tbody trong bảng của mình. những gì bạn có thể làm là đặt thuộc tính class hoặc id trong các <tr>phần tử của bạn và đặt các <td>thẻ tương ứng của chúng vào phần đệm:

table {
    border-collapse: collapse;
}

tr.yourClass td {
    padding: 10px;
}

Bạn thậm chí có thể chỉ định lớp trên cùng và lớp dưới cùng <tr>để chúng chỉ làm phần đệm trên cùng hoặc dưới cùng, tương ứng:

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

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

và trong HTML của bạn, <tr>thẻ của bạn sẽ trông giống như sau:

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

Hi vọng điêu nay co ich!

Câu trả lời djensen47 hoạt động tốt cho các trình duyệt mới hơn, tuy nhiên, như nó đã được chỉ ra, IE7 nó không hoạt động trong.

Cách giải quyết của tôi cho vấn đề này để hỗ trợ các trình duyệt cũ hơn là bọc nội dung từng ô bên trong một div. Sau đó, thêm margin-top vào 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;
}

Cài đặt chiều cao giữ cho các ô cao ít nhất 30px để ngăn bất kỳ màu ô nào được sử dụng bên trong div không bị thu gọn xung quanh văn bản. Phần đầu lề tạo không gian mong muốn bằng cách làm cho toàn bộ hàng cao hơn.

Gặp phải vấn đề này trong khi cố gắng giải quyết nó. Tôi đã thành công với việc đặt một <br>thẻ ngay trước </tbody>thẻ đóng . Đó là một bản sửa lỗi hoàn toàn trực quan, nhưng dường như hoạt động trên hầu hết các trình duyệt mà tôi đã thử nghiệm.

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

Cũng nên truy cập được.