HTML5中沒有間隙的表格行邊框

我想讓行在HTML表格中分開，除此之外沒有別的。很簡單，對嗎？

一些谷歌搜索帶給我的表格屬性rules，但顯然this isn't supported in HTML5。

所以我更深入地搜索CSS，並意識到我可以在tr的邊界附近放置邊界，對不對？那麼不，不僅不行，而且還有many SO threads | assured me its a bad idea。

按道理我打了他們解決方案，其中涉及tr { border-bottom ...不同的組合，但我總是用這微小的，令人厭惡的差距結束了。有什麼差距？在兩個td之間大約有一個像素或兩個間隔（在這兩個分隔線的列將是）。這似乎不是什麼大不了的事，但似乎沒有必要，我不能停下來注意它。不管出於什麼原因，它不會出現在jsfiddle中，所以我建議在記事本中試試這個並在瀏覽器中打開它。

我在犯一個愚蠢的錯誤嗎？這是一個錯字嗎？只是我的電腦？任何幫助將不勝感激...我一直在盯着這太久。

這是我的測試文件，我一直在Chrome和Android上進行測試。它確實需要同時工作，因爲這也會在Phonegap應用中運行，該應用在手機瀏覽器中呈現HTML5。

<html> 
<head> 
    <style> 
     td, th { 
      border-bottom: 1px solid black !important; 
     } 
    </style> 
</head> 

<body> 
    <table> 
     <tr> 
      <th>Item</th> 
      <th>Aisle</th> 
     </tr> 

     <tr> 
      <td>Cookies</td> 
      <td>2</td> 
     </tr> 
     <tr> 
      <td>Crackers</td> 
      <td>6</td> 
     </tr> 
     <tr> 
      <td>Milk</td> 
      <td>8</td> 
     </tr> 
     <tr> 
      <td>Cereal</td> 
      <td>2</td> 
     </tr> 
    </table> 
</body> 
</html>

來源

2012-07-03 Nick Miceli

table { 
     border-spacing: 0; 
     border-collapse: collapse; 
    }

看看那些幫助你。大多數瀏覽器默認在單元格之間填充一點（記住ol的HTML屬性cellspacing？）。這將刪除。

來源

2012-07-03 16:20:53 jackwanders

'border-spacing'做到了。哦，CSS ...謝謝！ –

只是爲了突顯後代，因爲它最初並不適合我。注意這些屬性應用於'table'元素，而不是'td'元素！ – ElFik

HTML5中沒有間隙的表格行邊框

回答

相關問題