CSS/Webkit: Hình nền cho hàng bảng

Question

Vì một số lý do khi bạn áp dụng hình nền cho một trình duyệt Safari/Chrome, nó sẽ hiển thị như thể quy tắc áp dụng cho mọi td.

Firefox:

Firefox http://www.whyprime.com/temp/table-firefox.png

Safari:

Safari http://www.whyprime.com/temp/table-safari.png

tôi tìm thấy bài viết này thảo luận về một sửa chữa:

http://snook.ca/archives/html_and_css/applying_a_back

Tôi đã có thể làm cho nó làm việc trong IE với gif spacer nhưng không thể tìm ra nó cho Safari.

http://www.whyprime.com/temp/table-background.html

Answer 1

Bảng của bạn sẽ luôn có 2 hàng? Chẳng hạn như:

<table> 
    <tr> 
    <td></td> 
    <td></td> 
    </tr> 
</table> 

Nếu vậy, một giải pháp đơn giản nhưng không quá sang trọng sẽ được chia hình nền của bạn thành hai hình ảnh, và áp dụng một lớp CSS để cột bên trái và bên phải, áp dụng một nửa số mũi tên phía bên phải của cột bên trái, và về phía bên trái của cột bên phải:

<table> 
    <tr> 
    <td class="left"></td> 
    <td class="right"></td> 
    </tr> 
</table> 

CSS của bạn sau đó có thể là tương tự như:

td.left 
{ 
    background: #ffffff url(../PathToLeftBackground.png) top right; 
} 
td.right 
{ 
    background: #fffff url(../PathToRightBackground.png) top left; 
} 

bạn cũng có thể sử dụng một hình ảnh ma nơi bạn sử dụng 1 hình ảnh và đặt nó khác nhau cho hai hình nền.

Tôi nhận ra đây có thể không phải là giải pháp lý tưởng nhất nhưng ít nhất nó sẽ khắc phục được vấn đề của bạn và giúp cho dự án của bạn hoạt động. Đôi khi tôi sử dụng các giải pháp đơn giản như thế này để tiến lên phía trước, và sau đó xem lại vấn đề để làm cho nó hiệu quả hơn sau này.

Hy vọng điều này sẽ hữu ích!

Answer 2

Theo mặc định, TR và TD có bảng thuộc tính hiển thị và hàng trong bảng. Chúng tôi cần họ quên điều đó và cảm thấy giống như các yếu tố khối đơn giản:

tr {display: block;} 
td {display: inline-block; background: transparent;} 

Mã này giải quyết được vấn đề hiển thị cho tôi.

Answer 3

hơi muộn nhưng, bạn có thể sử dụng "nền đính kèm: cố định" để giải quyết vấn đề này.

<table> 
    <tr class="bg"> 
    <td></td> 
    <td></td> 
    </tr> 
</table> 

và trong CSS

tr.bg { 
    background-image : url(../PathToLeftBackground.png) repeat-y 50px 0px; 
    background-attachment: fixed; 
} 

và nó hoạt động!