Opzioni CSS per applicare un bordo a tfoot? Styling TFOOT con "border-top" non funziona

Question

Un bordo non esegue il rendering quando applico una proprietà border CSS per tfoot (border-top, border-bottom, border, ecc, nessuno renda un bordo)

Quali opzioni sono là per rendere un bordo solo su tfoot o tbody? È possibile applicare un bordo a tbody o tfoot?

Esempio CSS + HTML di seguito, nessun bordo viene visualizzato in Chrome 18, Firefox 9 o IE9.

<style> 
table.sample tfoot 
{ 
border-top: 2px solid black; 
} 
</style> 
<table class="sample"> 
<thead> 
<tr> 
    <td>Date</td><td>DataX</td><td>DataY</td><td>DataZ</td> 
</tr> 
</thead> 
<tfoot> 
<tr> 
    <td colspan="3">Average:</td><td>100</td> 
</tr> 
</tfoot> 
<tbody> 
<tr> 
    <td>Feb1</td><td>22</td><td>333</td><td>44</td> 
</tr> 
<tr> 
    <td>Feb2</td><td>66</td><td>77</td><td>88</td> 
</tr> 
</tbody> 
</table> 

Answer 1

Aggiungi

table { 
border-collapse: collapse; 
} 

e sintonizzare imbottitura all'interno delle cellule in base alle esigenze (per compensare con la perdita della spaziatura predefinita tra le celle).

(In jsfiddle, normalize.css contiene questa impostazione. Una delle ragioni per cui jsfiddle non sempre corrisponde a quello che succede quando il codice viene testato separatamente.)

Answer 2

È possibile applicare bordi su tfoot e tbody.

Vedere il seguente violino per prova!

http://jsfiddle.net/KHx24/

Prova

<style type="text/css"> 
    table.sample tfoot 
    { 
     border-top: 2px solid black; 
    } 
</style>