Force <tr> hauteur avec CSS
J'ai besoin de contrôler la hauteur d'une ligne de tableau--j'ai essayé de réglage de la hauteur des cellules, mais je suis de frapper un mur de briques. Voir la démo.
tr.fixedRow,
tr.fixedRow td.fixedCell {
height: 50px;
overflow: hidden; }
Je sais que je puisse changer la display
de certaines choses à block
mais généralement bousille la table dans une mauvaise voie, je suis travailler avec une assez complexe qui interagit avec d'autres tables à proximité et les besoins de la ligne de pixels tout à fait, donc en général, la modification de la display
et ensuite essayer de le faire ressembler à un tableau de nouveau avec le CSS n'est pas une bonne solution pour moi, parce qu'il ne correspond pas. J'en ai besoin pour rester une table.
Je veux aussi éviter de le faire:
<td><div>
... cell content...
</div></td>
Qui semble comme forme terrible. Il y a sûrement un CSS seule solution à quelque chose d'aussi simple?
Ne ressemble pas à elle.
N'ai pas vérifié, mais cela ressemble: stackoverflow.com/questions/1554928/...
que l'on est proche, mais il voulait la table pour être une ligne, et toutes les réponses à refléter le fait que (par exemple l'utilisation de
white-space:nowrap;
ou le contrôle de la largeur pour faire les hauteurs de match). Je suis à la recherche de donner une ligne arbitraire en hauteur, de sorte que des solutions à cette question ne vais pas m'aider beaucoup.Avez-vous besoin de la largeur de la colonne à être déterminé à l'avance? Si non, vous pouvez l'installer à un certain pourcentage et de l'affecter à la cellule
position:relative
et de mettre un div à l'intérieur de ce qui a width:100%;position:absolute
. Cela fonctionnerait-il?
OriginalL'auteur brentonstrine | 2012-10-30
Vous devez vous connecter pour publier un commentaire.
Que vous essayez d'atteindre cet objectif en s'appuyant sur une propriété css qui ne fonctionne pas comme vous l'attendez: CSS overflow s'applique à des éléments de niveau bloc, quelque chose d'un
<td>
n'est pas (css:display: table-cell;
).voir CSS Overflow sur MDN
Pour cette raison, je crois que vous ne serez pas en mesure d'atteindre une hauteur fixe, sauf si vous définissez
display: block;
sur<td>
s - et vous avez dit que vous ne pouvez pas, comme il le ferait casser la table d'alignement, de sorte que la seule solution raisonnable serait, à mon avis:avec votre
<span>
ensemble dedisplay: block;
(n'a pas vraiment faire une différence pour avoir une durée définie à bloc au lieu d'un div, outre le fait qu'undiv
de casser la validation html, pendant une durée qui ne serait pas - les éléments de bloc ne sont pas autorisés danstd
éléments)c'est la plus élégante et la plus valable je pense.
Je ne vois pas pourquoi le réglage de la
span
àdisplay: block;
aurait empêcher de validation...en effet, je suppose que ma réponse n'était pas particulièrement clair à cet article, mais ce que je voulais dire, c'est que d'avoir un
div
jeter une erreur de validation; unspan
ne va pas lancer une telle erreur, bien sûr, comme ce n'est pas un élément de bloc - spec w3c et sa mise en œuvre dans l'outil de validation(s) ne se soucient pas si lesdisplay
propriété est définie àblock
via CSS. Je vais modifier ma réponse pour le rendre plus clair!OriginalL'auteur Luca