向CSS表格行添加兩個頂部邊框

如何獲得與http://jsfiddle.net/eLWe3/2/類似的效果，但沒有附加標記？向CSS表格行添加兩個頂部邊框

我嘗試了tr:before {}，但它與表混亂。解決方案必須與IE8一起工作，在IE7上回退到一個單一的邊界是沒關係的。

來源

2012-03-21 mlangenberg

我會說我在下面的答案中的編輯是儘可能接近你會得到。它只需要在IE8支持的最終表格行中添加一個類。 – CherryFlavourPez 2012-03-23 10:21:26

不是一個好主意，但使用的相關行/細胞

來源

2012-03-21 11:36:21 matpol

背景圖像也許這是一個可以接受的選擇：

tbody { 
    border-bottom: 2px outset pink; 
}

來源

2012-03-21 11:59:15

This fork of your original example是接近我能得到。更新後的CSS是：

table { margin: 0 auto; border-collapse:separate; } 
thead { background: #FDECEE; } 
th { font-weight: bold; } 
tbody tr:last-child td { border-bottom: 1px solid blue; } 
tfoot td { border-top: 1px solid pink; }

但是，正如你所看到的，我已經無法讓你在兩個邊界之間想要的2px的差距。據我所知，如果沒有一些描述的附加標記，這是不可能的：希望我錯了。

編輯 - 我已經創建了一個使用生成的內容，以獲取您的差距new example後：

tbody tr:last-child td:after { 
    content:''; 
    display:block; 
    border-bottom: 1px solid blue; 
    margin-bottom:2px; 
}

它工作在Firefox，Chrome和IE9 +，回落到一個單一的邊界爲功能較差的瀏覽器。 IE8失敗的唯一原因是因爲它不支持last:child來定位tbody中的最後一行。您可以將一個類添加到表中的最後一行（直接或使用JavaScript）以使其在該瀏覽器中運行。

來源

2012-03-21 12:08:24 CherryFlavourPez

向CSS表格行添加兩個頂部邊框

回答

相關問題