Mon voeux du Vendredÿ pour le CSS : TBODY

Hello,

C’est vendredï, le jour qui vient après le Jedï, donc je suis plus-ou-moins à l’abri au cas où je dirais une bêtise.

Voilà : je trouve qu’il y a une grosse omission tout de même avec le stylage des TBODY en CSS; on ne peut pas y ajouter de paddings ou de marges.

C’est prévu dans une futur version de CSS ou pas ?

P.S. Désolé pour les gens qui s’attendaient à une blague, y en a pas.

Bonjour,

Je viens de tester avec du positionnement relatif (avec dans l'idée de déplacer tbody + tbody, etc) mais il ne se passe rien, que ce soit avec ou sans table-layout: fixed;

edit: en rajoutant un span dans CHAQUE cellule td/th, tu peux en faire ce que tu veux mais bonjour la lourdeur (parce que j'imagine que si tu as plusieurs tbody, ta table est de bonne taille ?)
Modifié par Felipe (13 May 2011 - 20:36)

Felipe a écrit :
Bonjour,

Je viens de tester avec du positionnement relatif (avec dans l'idée de déplacer tbody + tbody, etc) mais il ne se passe rien, que ce soit avec ou sans table-layout: fixed;

Quand j’ai testé, ça m’a surpris que ça ne marche pas, j’ai cru à un bug. Il faudrait que je cherche un jour ce qui dans la référence fait que ça ne marche pas (c’est bien de constaté, comprendre c’est mieux).

Felipe a écrit :
edit: en rajoutant un span dans CHAQUE cellule td/th, tu peux en faire ce que tu veux mais bonjour la lourdeur (parce que j'imagine que si tu as plusieurs tbody, ta table est de bonne taille ?)

Oui, il y a plusieurs TBODY, c’est justement ça. Je voulais éviter de trop bricoler avec le balisage (même si je n'ai rien contre ajouter un DIV ici ou là quand c’est nécessaire et que ça reste propre), mais là, effectivement à cause du fait que ce soit une liste qui se répète, c’est plus embêtant.

J’ai put donner un peu d’espace en haut des TBODY jouant avec le padding des TH; le résultat est visuellement correcte (il fallait vraiment de l’espace, sinon ça faisait pâté), même s’il ne correspond pas à ce que j’avais à l’esprit sur l’instant.

Sur le Net, rien de concluant, même si j’ai put découvrir que d’autres se sont aussi cassé les dents sur cette même question (d’où ma suggestion pour CSS… si quelqu’un proche du staff peut la transmettre)

Détail amusant : beaucoup de fils de forums sur le Net, qui traitent de cette question, son marqués comme pouvant être dangereux dans les résultats de Google
Modifié par hibou57 (13 May 2011 - 20:49)

Exocet ! (vendredÿ c'est aussi le jour du poisson )

Voir http://jsfiddle.net/2Q6S7/ avec display: block; sur tbody. Bon ça casse bien l'algorithme qui calcule la largeur des cellules et/ou des tables, avec ou sans table-layout: fixed; (pas trop étonnant) et plus on magouille plus il se passe des choses bizarres (quoique c'est nickel dans JSFiddle et pas directement dans une page web ...)

Faudrait aussi tester display: inline-table; et lire cosnciencieusement la doc° CSS (et HTML) sur les tables, c'est un élément à part cet animal-là (et pour ce qui est des largeurs/hauteur : avec 2 algos bien distincts selon que l'on applique ou non table-layout: fixed;)

Et en effet inline-table c'est beaucoup mieux : http://jsfiddle.net/vWZ8T/1/
J'ai ajouté quelques commentaires dans le CSS : il faut une largeur suffisante sur les tbody pour garder le côté table de la force sans que le côté inline ne prenne le dessus

Bon là où ça va être lourd c'est que pour une marge de M pixels entre chaque tbody avec N tbody, il te faut (N-1) règles qui décalent le 2e tbody de M pixels, le 3ème de M*2 pixels, etc jusqu'au Nème qu'il faut décaler de M*(N-1) pixels.
Un boulot pour LESS si ça devient trop rébarbatif

edit: je vois dans l'admin que tu n'utilises pas le même navigateur Perso je n'ai testé qu'avec Fx3.6, Fx5 et Chromium
Modifié par Felipe (13 May 2011 - 21:55)

Felipe a écrit :
Exocet ! (vendredÿ c'est aussi le jour du poisson )

Cheese

Felipe a écrit :
Voir http://jsfiddle.net/2Q6S7/ avec display: block; sur tbody. […]

Faudrait aussi tester display: inline-table;

Justement, le second lien dit

Norme CSS a écrit :
User agents may ignore these 'display' property values for HTML table elements

Mais en même temps, il faut surtout voir ce qu’il en est en pratique.

Je passais juste dire ça. Je me me pencherai plus tard sur le second message (je ne l’ai pas encore lu, je viens juste de voir qu’il y en a un nouveau).

hibou57 a écrit :
Il faudrait que je cherche un jour ce qui dans la référence fait que ça ne marche pas (c’est bien de constaté, comprendre c’est mieux).

C'est cool, tu t'es adressé le RTFM tout seul, j'ai même pas besoin de le faire.
Ceci dit, à part apprendre que TBODY est en display:table-row-group, la spec CSS 2.1 ne nous apprend pas grand chose. HTML4 est plus réservé encore.

Test rapide dans Firefox 4:
- color, font-size, font-family, etc. sont pris en compte;
- background est pris en compte;
- border est pris en compte si la table est en border-collapse:collapse, ignoré autrement;
- margin et padding ignorés.

Il est possible que certaines règles définies pour display:table-row s'appliquent aussi à table-row-group. Je n'ai pas vérifié si CSS 2.1 était précis sur table-row.

bonjour,

il y aussi content et float qui peuvent aider a desorganiser tout ça .

theorie un contexte de formatage ebranlé: (opera 11 ne s'en laisse conté, mais IE8, fff4 et chrome 11 ...).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>marges entre tbody&nbsp;: un test</title>
</head>
<body>
<style >
td {min-width:100px;} /* on fixe une largeur minimale au lieu du layout fixe */
table, td ,tbody {border:solid;border-spacing:5px;} /* on visualise */
.test tr td{background:blue;border:none;} /* repere visuel */
.test tr:before,.test{content:'';display:table-row;width:1px;float:left;border:none} /* on ajoute un element et on perturbe le navigateur => bidouille branlante */
.test {position:relative;left:80px;} /* enfin on decalle notre tbody */
</style>
<table>
    <tbody>
        <tr>
            <td>test</td>
            <td>hopla</td>
            <td>schnapsum</td>
        </tr>

        <tr>
            <td>europa</td>
            <td>stork</td>
            <td>longdesc</td>
        </tr>
    </tbody>
    <tbody>

        <tr>
            <td>schnapsum</td>
            <td>test</td>
            <td>stork</td>
        </tr>
        <tr>
            <td>hopla</td>

            <td>europa</td>
            <td>longdesc</td>
        </tr>
    </tbody>
    <tbody class="test">
        <tr>
            <td>test</td>

            <td>schnapsum</td>
            <td>europa</td>
        </tr>
        <tr>
            <td>stork</td>
            <td>longdesc</td>
            <td>hopla</td>

        </tr>
    </tbody>
    <tbody>
        <tr>
            <td>europa</td>
            <td>stork</td>
            <td>hopla</td>

        </tr>
        <tr>
            <td>longdesc</td>
            <td>test</td>
            <td>schnapsum</td>
        </tr>
    </tbody>

    <tbody>
        <tr>
            <td>hopla</td>
            <td>longdesc</td>
            <td>schnapsum</td>
        </tr>
        <tr>

            <td>test</td>
            <td>stork</td>
            <td>europa</td>
        </tr>
    </tbody>
</table></body></html>