Comment fixer la hauteur de TR?

102

Est-il possible de fixer la hauteur d'une ligne (tr) sur une table?

Le problème apparaît lorsque je rétrécis la fenêtre du navigateur, certaines lignes commencent à jouer et je ne peux pas fixer la hauteur de la ligne.

J'ai essayé plusieurs façons: tr width="20" / tr style="height:20px" / td height="20" / td style="height:20px"

J'utilise IE7

Style

.tableContainer{
    color:#0076BF;
    margin: -10px 0px -10px 0px;
    border-spacing: 10px;
    empty-cells:show;
    width:90%;
    text-align:left;
} 

.tableContainer tr td{
    white-space:nowrap;
    text-align:left;
}

Code HTML.

<table class="tableContainer" cellspacing="10px">
    <tr style="height:15px;">
        <td>NHS Number</td>
        <td>&#160;</td>
        <td>Date of Visit</td>
        <td>&#160;</td>
        <td colspan="3">Care Time Started</td>
        <td>&#160;</td>
        <td rowspan="2" style="text-align:right;vertical-align:bottom;">&#9745;</td>
        <td rowspan="2" style="font-weight:bold;vertical-align:bottom;">Tick when<br/>                        care starts</td>
    </tr>
    <tr>
        <td width="90" class="tableContainerRow2">&#160;</td>
        <td >&#160;</td>
        <td width="80" class="tableContainerRow2">&#160;</td>
        <td >&#160;</td>
        <td width="40" class="tableContainerRow2">&#160;</td>
        <td  width="5">:</td>
        <td width="40" class="tableContainerRow2">&#160;</td>        
        <td >&#160;</td>
    </tr>
</table>
html html-table row Amra
la source

Réponses:

97

Les tableaux sont incertains (du moins, dans IE) lorsqu'il s'agit de fixer les hauteurs et de ne pas envelopper le texte. Je pense que vous trouverez que la seule solution est de mettre le texte à l'intérieur d'un divélément, comme ceci:

td.container > div {
    width: 100%;
    height: 100%;
    overflow:hidden;
}
td.container {
    height: 20px;
}
<table>
    <tr>
        <td class="container">
            <div>This is a long line of text designed not to wrap 
                 when the container becomes too small.</div>
        </td>
    </tr>
</table>
Développer l'extrait

De cette façon, la divhauteur de la cellule est celle de la cellule contenante et le texte ne peut pas grandir div, gardant la cellule / ligne à la même hauteur quelle que soit la taille de la fenêtre.

Andy E
la source
1
Merci pour le conseil, cela semble fonctionner, mais cela semble un peu compliqué.
Amra le
Heureux d'aider :-) Malheureusement, le code désordonné est généralement le cas dans les hacks et les solutions de contournement.
Andy E
J'utilise [code] .container {largeur: 100%; hauteur max: 40px; débordement caché; } [/ code] et [code] <div class = 'container'> </div> [/ code].
Cees Timmerman
J'ai fait la même méthode, en mettant un div dans une balise <th> et cela a bien fonctionné. J'ai eu ce problème uniquement sur Chrome. FFox, Safari et IE ont bien supporté la hauteur définie sur l'en-tête du tableau. Merci d'avoir partagé! :)
Mário Rodrigues
ne fonctionne pas en safari ... vous devez également définir la hauteur et la largeur réelles de la div, pas seulement du td
Radu Simionescu
15

Essayez de mettre la hauteur dans l'une des cellules, comme ceci:

<table class="tableContainer" cellspacing="10px">
 <tr>
  <td style="height:15px;">NHS Number</td>
  <td>&#160;</td>

Notez cependant que vous ne pourrez pas rendre la cellule plus petite que le contenu l'exige. Dans ce cas, vous devrez d'abord réduire la taille du texte.

poussée
la source
1
Je suis presque sûr que vous n'utilisez pas "px" dans les attributs html.
unflores
10
Je suis sûr que vous pouvez utiliser l'attribut de style.
Burak Dobur
11

Définition de la tdhauteur inférieure à la hauteur naturelle de son contenu

Étant donné que les cellules de tableau veulent être au moins suffisamment grandes pour encapsuler leur contenu, si le contenu n'a pas de hauteur apparente, les cellules peuvent être redimensionnées arbitrairement.

En redimensionnant les cellules, nous pouvons contrôler la hauteur de la ligne.

Une façon de faire cela consiste à définir le contenu avec une absoluteposition dans la relativecellule et à définir le heightde la cellule, et le leftet topdu contenu.

table {
  width: 100%;
}
td {
  border: 1px solid #999;
}
.set-height td {
  position: relative;
  overflow: hidden;
  height: 3em;
}
.set-height p {
  position: absolute;
  margin: 0;
  top: 0;
}
/* table layout fixed */
.layout-fixed {
  table-layout: fixed;
}
/* td width */
.td-width td:first-child {
  width: 33%;
}
<table><tbody>
  <tr class="set-height">
    <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
    <td>Foo</td></tr><tr><td>Bar</td><td>Baz</td></tr><tr><td>Qux</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
  </tr>
</tbody></table>
<h3>With <code>table-layout: fixed</code> applied:</h3>
<table class="layout-fixed"><tbody>
  <tr class="set-height">
    <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
    <td>Foo</td></tr><tr><td>Bar</td><td>Baz</td></tr><tr><td>Qux</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
  </tr>
</tbody></table>
<h3>With <code>&lt;td&gt; width</code> applied:</h3>
<table class="td-width"><tbody>
  <tr class="set-height">
    <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
    <td>Foo</td></tr><tr><td>Bar</td><td>Baz</td></tr><tr><td>Qux</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
  </tr>
</tbody></table>
Développer l'extrait

La table-layoutpropriété

Le deuxième tableau de l'extrait de code ci-dessus a été table-layout: fixedappliqué, ce qui donne aux cellules une largeur égale, quel que soit leur contenu, dans le parent.

Selon caniuse.com , il n'y a pas de problèmes de compatibilité importants concernant l'utilisation du table-layout12 septembre 2019.

Ou appliquez simplement widthà des cellules spécifiques comme dans le troisième tableau.

Ces méthodes permettent à la cellule contenant le contenu réellement sans taille créée par l'application position: absolutede recevoir une circonférence arbitraire.

Beaucoup plus simplement ...

J'aurais vraiment dû y penser dès le début; nous pouvons manipuler le contenu des cellules du tableau au niveau bloc de toutes les manières habituelles, et sans détruire complètement la taille naturelle du contenu avec position: absolute, nous pouvons quitter le tableau pour déterminer quelle devrait être la largeur.

table {
  width: 100%;
}
td {
  border: 1px solid #999;
}
table p {
  margin: 0;
}
.cap-height p {
  max-height: 3em;
  overflow: hidden;
}
<table><tbody>
  <tr class="cap-height">
    <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
    <td>Foo</td>
  </tr>
  <tr class="cap-height">
    <td><p>Bar</p></td>
    <td>Baz</td>
  </tr>
  <tr>
    <td>Qux</td>
    <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
  </tr>
</tbody></table>
Développer l'extrait

Fred Gandt
la source
Enfin une réponse qui s'annonce prometteuse! Je dois l'essayer dès que je serai au travail, je donnerai des commentaires si je n'oublie pas.
jeromej
1
A travaillé comme un charme! (Attention, il supprime text-align: centeret autres astuces de centrage cependant… car il repose sur position: absolute)
jeromej
Cela fonctionne pour la hauteur dans mon cas, mais lors de l'utilisation postion: absolute, je perds la largeur de cellule automatique. Essayer de trouver un moyen pour que le tableau calcule toujours correctement la largeur de cellule tout en prenant le contrôle de la hauteur de ligne. Des pensées?
ash le
@ash - Je ne pense pas immédiatement à un moyen de conserver la largeur entièrement automatique après avoir effectivement détruit la taille du contenu, mais nous pouvons forcer les cellules du tableau à être arbitrairement larges. J'ai développé l'extrait d'exemple pour montrer une méthode qui pourrait vous aider. Je vais y réfléchir davantage et ajouter plus de détails si quelque chose d'utile me vient à l'esprit :)
Fred Gandt
Merci Fred. Notez que je pourrais avoir des en-têtes (<th>) pour donner une taille fixe aux colonnes, mais je crains que les en-têtes soient trop étroits ou trop larges.
ash
8

Mettre div dans un td a fonctionné pour moi. 

<table width="100%">
    <tr><td><div style="font-size:2px; height:2px; vertical-align:middle;">&nbsp;</div></td></tr>
user2987600
la source
2

La largeur de votre table est de 90% par rapport à son conteneur.

Si vous appuyez sur la page, vous réduisez probablement également la largeur du tableau. La largeur des cellules diminue également et le navigateur compense en augmentant la hauteur.

Pour que la hauteur reste intacte, vous devez vous assurer que les largeurs des cellules peuvent contenir le contenu voulu. Vous voulez probablement essayer de corriger la largeur de la table. Ou peut-être jouer avec la largeur minimale de la table.

okw
la source
1

J'ai dû faire ça pour obtenir le résultat que je voulais:

<td style="font-size:3px; float:left; height:5px; vertical-align:middle;" colspan="7"><div style="font-size:3px; height:5px; vertical-align:middle;"><b><hr></b></div></td>

Il a refusé de travailler uniquement avec la cellule ou le div et avait besoin des deux.

Jen
la source
-5

C'est parce que les mots s'emballent et vont sur de nouvelles lignes, étirant ainsi le TR. Cela devrait résoudre votre problème:

overflow:hidden;

Mettez cela dans les styles TR Bien que cela devrait fonctionner, pourquoi ne pas simplement le laisser s'étirer o0

PS. Je ne l'ai pas testé alors ne déteste pas XD

Ozzy
la source
3
Pas de haine, mais il existe une liste de styles pris en charge par l'élément TD dans IE à msdn.microsoft.com/en-us/library/ms535911(VS.85).aspx . overflown'en fait pas partie.
Andy E