Pourquoi CSS td width ne fonctionne pas?

S’il vous plaît voir ce JSFIDDLE

td.rhead { width: 300px; } 

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

 
need 300px Week #0 Week #1
SMTWTFS SMTWTFS

En outre, quels sont les effets de la position: fixe, absolu, etc. Je cherche une raison plus qu’un correctif. J’espère comprendre comment cela fonctionne.

td width n'est pas 300px comme désiré

Cela peut ne pas être ce que vous voulez entendre, mais display: table-cell ne respecte pas la largeur et sera réduite en fonction de la largeur de la table entière. Vous pouvez contourner cela simplement en ayant un élément display: block dans la cellule de la table elle-même, dont vous spécifiez la largeur, par exemple

 
wide

Cela ne devrait pas faire une grande différence si la

elle-même est position: fixed ou absolue car la position des cellules est statique par rapport à la table.

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

EDIT: Je ne peux pas prendre le crédit, mais comme les commentaires disent, vous pouvez simplement utiliser min-width au lieu de width sur la cellule de tableau à la place.

Il vaut mieux utiliser la table-layout: fixed

Auto est la valeur par défaut et avec les tables volumineuses, cela peut provoquer un décalage latéral du client, car le navigateur effectue une itération pour vérifier toutes les tailles.

Fixe est bien meilleur et rend plus rapide à la page. La structure de la table dépend de la largeur globale des tables et de la largeur de chacune des colonnes.

Ici, il est appliqué à l’exemple d’origine: JSFIDDLE , vous noterez que les colonnes restantes sont écrasées et chevauchent leur contenu. Nous pouvons corriger cela avec un peu plus de CSS (il ne me rest plus qu’à append une classe au premier TR):

  table { width: 100%; table-layout: fixed; } .header-row > td { width: 100px; } td.rhead { width: 300px } 

Vu en action ici: JSFIDDLE

La raison pour laquelle cela ne fonctionne pas dans le lien que vous avez fourni est que vous essayez d’afficher une colonne 300px PLUS 52 colonnes chacune des 7 colonnes. Réduisez le nombre de colonnes et cela fonctionne. Vous ne pouvez pas adapter ce nombre à 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.

La raison en est que vous n’avez pas spécifié la largeur de la table et que tout votre tas de td débordent.

Par exemple , j’ai donné à la table une largeur de 5000px, ce qui, selon moi, correspondrait à vos besoins.

 table{ width:5000px; } 

C’est exactement le même code que vous avez fourni, que j’ai simplement ajouté dans la largeur de la table.

Je crois que ce qui se passe, c’est parce que vos TD ont dépassé la largeur de table par défaut. Ce que vous pouvez voir, si vous extrayez environ 45 de vos td dans chaque tr (c.-à-d. Le code que vous avez fourni dans votre question, pas jsfiddle), cela fonctionne parfaitement

Essayez ça ça marche.

 
need 300px

Essayez d’utiliser

 table { table-layout: auto; } 

Si vous utilisez Bootstrap, la table classe a une disposition de table-layout: fixed; par défaut.

Ma solution folle.)

 $(document).ready(function() { $("td").each(function(index) { var htmlText = "
" + $(this).text() +"
"; $(this).html(htmlText); }); });

Utilisez la propriété table-layout et la valeur “fixed” sur votre table.

 table { table-layout: fixed; width: 300px; /* your desired width */ } 

Après avoir défini toute la largeur de la table, vous pouvez maintenant configurer la largeur en% des td.

 td:nth-child(1), td:nth-child(2) { width: 15%; } 

Vous pouvez en apprendre plus sur ce lien: http://www.w3schools.com/cssref/pr_tab_table-layout.asp

Vous pouvez aussi utiliser:

 .rhead { width:300px; } 

mais cela ne sera possible qu’avec certains navigateurs, si je me souviens bien, IE8 ne le permet pas. Dans l’ensemble, il est plus sûr de simplement placer l’atsortingbut width="" dans

lui-même.

Si la largeur de la table est par exemple de 100%, essayez d’utiliser une largeur de pourcentage sur td telle que 20%.

Enveloppez le contenu de la première cellule dans div, par exemple comme ceci:

HTML:

 
a little space

CSS:

 .rhead { width: 300px; } 

Voici un jsfiddle .