CSS options pour appliquer une bordure à tfoot? Le style de pied de page avec “border-top” ne fonctionne pas
Une frontière ne rend pas quand j'applique une CSS, la propriété border pour tfoot
(border-top
, border-bottom
, border
, etc., aucun rendu frontière)
Quelles options sont là pour rendre une frontière sur tfoot
ou tbody
? Est l'application d'une frontière à tbody
ou tfoot
pris en charge?
Exemple de CSS+HTML ci-dessous, pas de frontière est rendu dans Chrome 18, Firefox 9 ou 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>
OriginalL'auteur John | 2012-02-11
Vous devez vous connecter pour publier un commentaire.
Ajouter
et de régler le rembourrage à l'intérieur de cellules que nécessaire (pour compenser la perte de la valeur par défaut de l'espacement entre les cellules).
(En jsfiddle, de les normaliser.css contient ce paramètre. Une des raisons pour lesquelles jsfiddle ne correspondant pas toujours à ce qui se passe lorsque le code est testé séparément.)
Sur IE9, cela semble dépendre de mode; dans IE9 mode et IE8 il fonctionne en mode Quirks pas. L'Opéra de comportement est très étrange, car il attire, en outre, à la demande de la frontière, à la bordure du bas de la
thead
élément. Je ne peux pas trouver une meilleure façon de contourner ce bug que l'ajout detable.sample thead { border-bottom: 2px solid transparent; }
.OriginalL'auteur Jukka K. Korpela
Vous pouvez appliquer des bordures à tfoot et tbody.
Voir la suite de violon pour preuve!
http://jsfiddle.net/KHx24/
Essayer
collapse
) je vois ce rendu OK et je vois de la frontière, en Chrome. Mais comme @jukka noté jsfiddle ajoutecollapse
donc quand je l'ai testé en local w/out de l'collapse
style, je ne vois pas de la frontière, en Chrome18. Mais ce qui est bizarre c'est qu'en regardant votre violon lien dans IE9 j' consultez la frontière, c'est étrange parce que sur place, je ne pas consultez la frontière dans IE9 même avec lecollapse
style surtable
(qui, je crois, essentiellement imite ce que le violon n'). Le violon doit être l'application de certaines autres styles de trop qui causent IE9 pour rendre cette frontière, ce que d'autres styles?OriginalL'auteur Jason