À l'aide de CSS td largeur absolue, position
Veuillez voir cette JSFIDDLE
td.rhead { width: 300px; }
Pourquoi ne pas le CSS de la largeur de travail?
<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>
Aussi, quels sont les effets de la position:fixe, absolue etc sur td largeurs cas échéant? Je suis à la recherche d'une raison plus que d'un correctif. Je suis l'espoir de comprendre comment il fonctionne.
display: table-cell
ne respecte paswidth
(de la même manière qu'il ne serait pas travailler pourdisplay: inline
). Je ne comprends pas ce que vous leur demandez à propos deposition fixed|absolute
- parce que dans mon code, j'ai le set de table fixe. Comme vous pouvez le deviner, je suis en train de réaliser un montage en haut de la page. J'ai donc tout simplement d'énoncer dans le cas où la position de l'attribut affecte largeurs.
- double possible de CSS table td largeur fixe, pas flexible
Vous devez vous connecter pour publier un commentaire.
Cela peut ne pas être ce que vous voulez entendre, mais
display: table-cell
ne respecte pas la largeur et seront regroupées en fonction de la largeur de la table entière. Vous pouvez vous déplacer facilement tout en ayant unedisplay: block
élément à l'intérieur de la cellule du tableau lui-même, dont la largeur que vous spécifiez, e.gCela ne devrait pas faire beaucoup de différence si le
<table>
lui-même estposition: fixed
ou absolue, car la position des cellules sont toutes statique par rapport à la table.http://jsfiddle.net/ExplosionPIlls/Mkq8L/4/
EDIT: je ne peux pas prendre le crédit, mais que les commentaires qui disent que vous pouvez simplement utiliser
min-width
au lieu dewidth
sur la cellule du tableau à la place.min-width
sur leTD
ne semblent travailler dans Chrome et FF: jsfiddle.net/Mkq8L/7min-width: 300px
fonctionne! (@TimMedora vous avez été quelques secondes plus rapide!)min-width
il n'y a pas de problème, prenez la plus grande.Vous êtes mieux d'utiliser
table-layout: fixed
Auto est la valeur par défaut et avec de grandes tables qui peut causer un peu de côté client retard que le navigateur effectue une itération à travers de vérifier toutes les tailles de s'adapter.
Fixe est de loin préférable et rend plus rapide de la page. La structure de la table est dépendante sur les tables de la largeur totale et la largeur de chacune des colonnes.
Ici, il est appliqué à l'exemple original: JSFIDDLE, Vous remarquerez que les colonnes restantes sont écrasés et le chevauchement de leurs contenus. Nous pouvons résoudre ce problème avec un peu plus de CSS (tout ce que j'ai eu à faire est d'ajouter une classe au premier TR):
La voir en action ici: JSFIDDLE
La raison pour laquelle cela ne fonctionne pas dans le lien de votre condition est parce que vous tentez d'afficher une 300px colonne de PLUS de 52 colonnes de la durée de 7 colonnes. Réduire le nombre de colonnes et il fonctionne. Vous ne pouvez pas répondre que de nombreux sur l'écran.
Si vous voulez forcer les colonnes pour les adapter à essayer de définir:
voir mon jsfiddle: http://jsfiddle.net/Mkq8L/6/
@mike je ne peux pas encore de commentaires.
La raison est, parce que vous n'avez pas à spécifier la largeur de la table, et votre tas de td sont débordante.
Ceci par exemple, je vous ai donné la table d'une largeur de 5000px, dont je pensais qu'ils correspondent à vos besoins.
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 votre banque TD sont de la table par défaut de la largeur. Que vous pouvez voir, si vous tirez environ 45 de votre banque td dans chaque tr, (c'est à dire le code que vous avez fourni dans votre question, pas jsfiddle), il fonctionne exactement amende
Essayer ce travail.
Essayez d'utiliser
Si vous utiliser Bootstrap, classe
table
atable-layout: fixed;
par défaut.Utiliser le tableau de disposition de la propriété et de la "fixe" de la valeur sur votre table.
Après la mise en place de la totalité de la largeur de la table, vous pouvez désormais configurer la largeur en % de la banque td.
Vous pouvez en apprendre plus sur ce lien: http://www.w3schools.com/cssref/pr_tab_table-layout.asp
Mon fou solution).
Si la largeur de la table est par exemple de 100%, essayez d'utiliser un pourcentage de la largeur des td comme 20%.
Envelopper le contenu de la première cellule dans la div par exemple comme ça:
HTML:
CSS:
Ici est un jsfiddle.
Vous pouvez également utiliser:
mais cela ne fera qu'avec certains navigateurs, si je me souviens bien, IE8 ne le permet pas. Dans l'ensemble, Il est plus sûr de mettre le
width=""
attribut dans la<td>
lui-même.