Utilisation de CSS td width absolute, position

Question

Veuillez voir ceci JSFIDDLE

td.rhead { width: 300px; }

Pourquoi la largeur CSS ne fonctionne-t-elle pas ?

<table>
<thead>
<tr>
<td class="rhead">need 300px</td>
<td colspan="7">Week #0</td>
<td colspan="7">Week #1</td>
<!-- etc..-->
</tr>
<tr>
<td class="rhead"></td>
<td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td>
<td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td>
<!-- etc... -->
</tr>
<thead>
</table>

Par ailleurs, quels sont les effets de position:fixed, absolute, etc. sur la largeur des td, le cas échéant ? Je cherche une raison plus qu'une solution. J'espère comprendre comment cela fonctionne.

Answer 1

Ce n'est peut-être pas ce que vous voulez entendre, mais display: table-cell ne respecte pas la largeur et sera réduit en fonction de la largeur de l'ensemble du tableau. Vous pouvez facilement contourner ce problème en ayant simplement une balise display: block à l'intérieur de la cellule du tableau elle-même dont vous spécifiez la largeur, par exemple

<td><div style="width: 300px;">wide</div></td>

Cela ne devrait pas faire une grande différence si la <table> elle-même est position: fixed ou absolue, car la position des cellules est statique par rapport au tableau.

http://jsfiddle.net/ExplosionPIlls/Mkq8L/4/

EDIT : Je ne peux pas m'attribuer le mérite, mais comme les commentaires le disent, vous pouvez simplement utiliser min-width au lieu de width sur la cellule du tableau à la place.

Answer 2

Vous feriez mieux d'utiliser table-layout: fixed

Auto est la valeur par défaut et, dans le cas de tableaux de grande taille, elle peut provoquer un décalage côté client, car le navigateur parcourt le tableau pour vérifier que toutes les tailles sont adaptées.

Fixe est bien meilleur et rend la page plus rapidement. La structure du tableau dépend de la largeur totale du tableau et de la largeur de chacune de ses colonnes.

Ici, elle est appliquée à l'exemple original : JSFIDDLE Vous remarquerez que les autres colonnes sont écrasées et que leur contenu se chevauche. Nous pouvons corriger cela avec un peu plus de CSS (tout ce que j'ai eu à faire est d'ajouter une classe à la première TR) :

    table {
        width: 100%;
        table-layout: fixed;
    }

    .header-row > td {
        width: 100px;
    }

    td.rhead {
        width: 300px
    }

Vu en action ici : JSFIDDLE

Answer 3

La raison pour laquelle cela ne fonctionne pas dans le lien que vous avez fourni est que vous essayez d'afficher une colonne de 300px PLUS 52 colonnes de 7 colonnes chacune. Réduisez le nombre de colonnes et ça marche. Vous ne pouvez pas en faire tenir autant sur l'écran.

Si vous voulez forcer les colonnes à s'adapter, essayez le réglage :

body {min-width:4150px;}

voir mon jsfiddle : http://jsfiddle.net/Mkq8L/6/ @mike Je ne peux pas encore commenter.

Answer 4

La raison en est que vous n'avez pas spécifié la largeur du tableau, et que tout votre groupe de td déborde.

Par exemple, ceci J'ai donné à la table une largeur de 5000px, ce qui me semble correspondre à vos besoins.

table{
    width:5000px;
}

C'est exactement le même code que vous avez fourni, que j'ai simplement ajouté dans la largeur du tableau.

Je crois que ce qui se passe, c'est que vos TD sont bien au-delà de la largeur par défaut de la table. Ce que vous pouvez voir, si vous retirez environ 45 de vos td dans chaque tr, (c'est-à-dire le code que vous avez fourni dans votre question, pas jsfiddle), cela fonctionne parfaitement.

Answer 5

Essayez ceci, ça marche.

<table>
<thead>
<tr>
<td width="300">need 300px</td>