Khoảng cách giữa các thead và tbody

Question

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

<table> 
    <thead> 
    <tr><th>Column 1</th><th>Column 2</th></tr> 
    </thead> 
    <tbody> 
    <tr class="odd first-row"><td>Value 1</td><td>Value 2</td></tr> 
    <tr class="even"><td>Value 3</td><td>Value 4</td></tr> 
    <tr class="odd"><td>Value 5</td><td>Value 6</td></tr> 
    <tr class="even last-row"><td>Value 7</td><td>Value 8</td></tr> 
    </tbody> 
</table> 

Và tôi muốn để định dạng theo cách sau:

• tiêu đề hàng với một hộp bóng
• khoảng trắng giữa hàng tiêu đề và hàng nội dung đầu tiên

thứ khác nhau Tôi đã thử:

table { 
    /* collapsed, because the bottom shadow on thead tr is hidden otherwise */ 
    border-collapse: collapse; 
} 
/* Shadow on the header row*/ 
thead tr { box-shadow: 0 1px 10px #000000; } 
/* Background colors defined on table cells */ 
th   { background-color: #ccc; } 
tr.even td { background-color: yellow; } 
tr.odd td { background-color: orange; } 

/* I would like spacing between thead tr and tr.first-row */ 

tr.first-row { 
    /* This doesn't work because of border-collapse */ 
    /*border-top: 2em solid white;*/ 
} 

tr.first-row td { 
    /* This doesn't work because of border-collapse */ 
    /*border-top: 2em solid white;*/ 
    /* This doesn't work because of the td background-color */ 
    /*padding-top: 2em;*/ 
    /* Margin is not a valid property on table cells */ 
    /*margin-top: 2em;*/ 
} 

Xem thêm: http://labcss.net/#8AVUF

Có ai có bất cứ lời khuyên về cách tôi có thể làm điều này? Hoặc đạt được hiệu ứng hình ảnh giống nhau (nghĩa là: khoảng cách giữa hai thân bóng)?

Answer 1

tôi nghĩ rằng tôi có nó trong fiddle này và tôi cập nhật yours:.

tbody:before { 
    content: "-"; 
    display: block; 
    line-height: 1em; 
    color: transparent; 
} 

Answer 2

này sẽ cung cấp cho bạn một số khoảng trắng giữa tiêu đề và nội dung bảng

thead tr { 
    border-bottom: 10px solid white; 
} 

Mặc dù thiết lập các màu biên giới là một chút của một phương pháp cheat, nó sẽ hoạt động tốt.

Mẫu điều tra, bạn không thể đặt hộp bóng tối để một dòng của bảng, nhưng bạn có thể đến các tế bào bảng:

th { 
    box-shadow: 5px 5px 5px 0px #000000 ; 
} 

(Tôi không chắc chắn làm thế nào bạn muốn cái bóng để trông giống như, vì vậy chỉ cần điều chỉnh ở trên)

Answer 3

Vì vậy, hộp bóng không hoạt động tốt trên các yếu tố tr ... nhưng nó wo rk trên phần tử nội dung giả; sinsedrix đưa tôi đi đúng hướng và đây là những gì tôi đã kết thúc với:

table { 
    position: relative; 
} 

td,th {padding: .5em 1em;} 

tr.even td { background-color: yellow; } 
tr.odd td { background-color: orange; } 

thead th:first-child:before { 
    content: "-"; 

    display: block; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    z-index: -1; 

    box-shadow: 0 1px 10px #000000; 
    padding: .75em 0; 

    background-color: #ccc; 
    color: #ccc; 
} 

thead th { 
    padding-bottom: 2em; 
} 

Answer 4

Hơn nữa bạn có thể sử dụng Zero-Width Non-Joiner để giảm thiểu sinsedrix CSS:

tbody:before {line-height:1em; content:"\200C"; display:block;} 

Answer 5

này làm việc cho tôi trên Chrome (đối với các trình duyệt khác mà tôi không biết).

.theTargethead::after 
{ 
    content: ""; 
    display: block; 
    height: 1.5em; 
    width: 100%; 
    background: white; 
} 

Mã css như vậy tạo ra một khoảng trắng trống giữa thead và bảng của bảng. Nếu tôi đặt nền thành trong suốt, cột đầu tiên của các phần tử thứ tr trên sẽ hiển thị màu riêng của nó (màu xanh lá cây trong trường hợp của tôi) tạo ra khoảng 1 cm đầu tiên của :: sau phần tử màu xanh lá cây.

Cũng sử dụng dấu "-" trong hàng content : "-"; thay vì chuỗi trống "" có thể tạo ra sự cố khi xuất các trang đã in thành tệp, tức là pdf. Tất nhiên đây là phân tích cú pháp/xuất khẩu phụ thuộc. Tệp được xuất như vậy được mở bằng trình chỉnh sửa pdf (ví dụ: từ Ms, Ms Excel, OpenOffice, LibreOffice, Adobe Acrobat Pro) vẫn có thể chứa dấu trừ. Chuỗi rỗng không có cùng một vấn đề. Không có vấn đề gì trong cả hai trường hợp nếu bảng html in được xuất dưới dạng hình ảnh: không có gì được hiển thị.

Tôi không nhận thấy bất kỳ vấn đề nào ngay cả khi sử dụng nội dung: "\ 200C";

Answer 6

này nên làm như lừa:

table { 
    position: relative; 
} 
thead th { 
    // your box shadow here 
} 
tbody td { 
    position: relative; 
    top: 2rem; // or whatever space you want between the thead th and tbody td 
} 

Và điều này nên chơi đẹp với hầu hết các trình duyệt.