將表格背景圖片應用到表格行 - Bug

我看到有幾篇關於這個文章的文章，其中包括一篇關於SO的文章。然而，他們都沒有回答這個問題，我發佈了一個更新的圖片，在4個瀏覽器中演示了這個問題。將表格背景圖片應用到表格行 - Bug

testcase image

火狐呈現在TR上的背景圖片，因爲我想，但你可以看到沒有其他人做..

沒有任何人有什麼想法？在這一點上，它看起來像我需要回到圖紙borad。

ps。添加背景：無或背景圖像：無到TD不解決此問題。

這是我的測試情況下，代碼：

<!DOCTYPE html> 
<head> 
<title></title> 

    <style type="text/css"> 
     body 
     { 
      background-color:#aaa; 
     } 

     table 
     { 
      background-color:#fff; 
     } 

     tbody tr 
     { 
      height:80px; 
      background:#aaa url("Content/LM_DROPDOWN_BG_BUTT_01.png") no-repeat bottom ; 
      position:relative; 
     } 

     tbody tr td 
     { 
      background-image:none; 
     } 
    </style> 


</head> 
<body> 


    <table> 
     <thead> 
      <tr> 
       <th style="width:200">Col1</th> 
       <th style="width:200">Col2</th> 
       <th style="width:200">Col3</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>Row 1 Col 1</td> 
       <td>Row 1 Col 2</td> 
       <td>Row 1 Col 3</td> 
      </tr> 
      <tr> 
       <td colspan="3"></td> 
      </tr> 
      <tr> 
       <td>Row 2 Col 1</td> 
       <td>Row 2 Col 2</td> 
       <td>Row 2 Col 3</td> 
      </tr> 
      <tr> 
       <td colspan="3"></td> 
      </tr> 
      <tr> 
       <td>Row 3 Col 1</td> 
       <td>Row 3 Col 2</td> 
       <td>Row 3 Col 3</td> 
      </tr> 
      <tr> 
       <td colspan="3"></td> 
      </tr> 
     </tbody> 
    </table> 
</body> 
</html>

來源

2011-06-30 Duncan Gravill

如果您的文檔類型不是'<！DOCTYPE html>'，那麼這不是HTML5 – Chowlett

我原來是HTML5。我嘲笑了這個測試案例，使一切變得簡單和清晰..認爲我有Visual Studio默認爲HTML5 ..顯然不適用於新的HTML文檔..這是同樣的問題無論哪種方式 –

會爲你嵌套表的工作？

see the 3rd row

工程跨瀏覽器。不可愛（嵌套桌！），但完成工作。

造型<tr>是嗡嗡聲，有問題，特別是跨瀏覽器。畢竟，tr只能包含td。它不是用來支持其他的東西（嘗試<table><tr><td>1</td></tr><div>2</div></table>的樂趣）。

另外，給歌劇一些愛。

編輯：但是，你必須要麼有嵌套<td>相同（固定）寬（或內容），否則，<td>的寬度將被打破（不一樣）。

來源

2011-06-30 17:23:17 Kraz

感謝您的答覆，但我懷疑嵌套表是一個非常語義的解決方案。對於每一行都有一個嵌套表格不能是一個好的解決方案。我想我應該忘記在tr元素上有bg圖像，並找到另一種方式來創建我的功能 –

將表格背景圖片應用到表格行 - Bug

回答

相關問題