Варианты CSS, чтобы применить границу к tfoot? Стилизация tfoot с помощью "border-top" не работает

Question

Граница не отображается, когда я применяю свойство границы CSS к tfoot (border-top, border-bottom, border и т. Д., Граница не отображается)

Какие есть вариантывизуализировать границы только на tfoot или tbody?Поддерживается ли применение границы к tbody или tfoot?

Пример CSS + HTML ниже, границы не отображаются в Chrome 18, Firefox 9 или 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

Добавьте

table {
 border-collapse: collapse;
}

и настройте заполнение внутри ячеек по мере необходимости (чтобы компенсировать потерю расстояния по умолчанию между ячейками).

(В jsfiddle, normalize.css содержит этот параметр. Одна из причин, по которой jsfiddle не всегда соответствует тому, что происходит, когда код тестируется отдельно.)

Answer 2

Вы можете применить границы к tfoot и tbody.

См. Следующую скрипку для доказательства!

http://jsfiddle.net/KHx24/

Попробуйте

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