web-dev-qa-db-fra.com

Comment corriger la hauteur de TR?

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

Le problème apparaît lorsque je réduis la fenêtre du navigateur, que certaines lignes commencent à être lues et que je ne peux pas en fixer la hauteur.

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>
htmlhtml-tablerow
95
Amra

Les tableaux sont douteux (du moins dans IE) pour fixer des hauteurs et ne pas insérer de texte. Je pense que vous constaterez que la seule solution consiste à insérer le texte dans un élément div, comme suit:

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>

De cette façon, la hauteur de div est celle de la cellule qui le contient et le texte ne peut pas grandir div, en conservant la même hauteur pour la cellule/ligne, quelle que soit la taille de la fenêtre.

91
Andy E

Essayez de placer 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 le requiert. Dans ce cas, vous devrez d'abord réduire le texte.

13
poke

Régler la hauteur td sur une valeur inférieure à la hauteur naturelle de son contenu

Comme les cellules de tableau veulent être au moins assez grandes pour recouvrir leur contenu, si le contenu n'a pas de hauteur apparente, les cellules peuvent être redimensionnées de façon arbitraire.

En redimensionnant les cellules, nous pouvons contrôler la hauteur des lignes.

Une façon de procéder consiste à définir le contenu avec une position absolute dans la cellule relative et à définir le height de la cellule, ainsi que left et top du contenu.

table {
    width: 100%;
}
.set-height td {
    position: relative;
    overflow: hidden;
    height: 2em;
}
.set-height p {
    position: absolute;
    margin: .1em;
    left: 0;
    top: 0;
}
<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></tr>
    <tr><td>Foo</td></tr>
    <tr><td>Bar</td></tr>
    <tr><td>Baz</td></tr>
    <tr><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>
9
Fred Gandt

Mettre div à l'intérieur d'un td l'a fait fonctionner pour moi.

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

La largeur de votre table est de 90%, ce qui est relatif à 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 ne soit pas modifiée, vous devez vous assurer que la largeur des cellules peut contenir le contenu voulu. Vous voulez probablement essayer de fixer la largeur de la table. Ou peut-être jouer avec la largeur minimale de la table.

2
o.k.w

Je devais le faire 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 la division et avait besoin des deux.

1
Jen