¿Cómo arreglar la altura de TR?

102

¿Es posible fijar la altura de una fila (tr) en una mesa?

El problema aparece cuando encojo la ventana del navegador, algunas filas comienzan a jugar y no puedo arreglar la altura de la fila.

Intenté de varias formas: tr width="20" / tr style="height:20px" / td height="20" / td style="height:20px"

Estoy usando IE7

Estilo

.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;
}

Código 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
fuente

Respuestas:

97

Las tablas son dudosas (al menos, en IE) cuando se trata de fijar alturas y no ajustar texto. Creo que encontrará que la única solución es poner el texto dentro de un divelemento, así:

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>
Expandir fragmento

De esta manera, la divaltura de la es la de la celda contenedora y el texto no puede crecer div, manteniendo la celda / fila a la misma altura sin importar el tamaño de la ventana.

Andy E
fuente
1
Gracias por el consejo, parece funcionar, pero se ve un poco desordenado.
Amra
Feliz de ayudar :-) Desafortunadamente, el código desordenado suele ser el caso en los trucos y soluciones.
Andy E
Yo uso [código] .container {ancho: 100%; altura máxima: 40px; desbordamiento: oculto; } [/ código] y [código] <div class = 'contenedor'> </div> [/ código].
Cees Timmerman
Hice el mismo método, colocando un div dentro de una etiqueta <th> y funcionó bien. Tuve este problema solo en Chrome. FFox, Safari e IE admitieron bien la altura establecida en el encabezado de la tabla. ¡Gracias por compartir! :)
Mário Rodrigues
no funciona en safari ... también debe establecer la altura y el ancho reales en el div, no solo en el td
Radu Simionescu
15

Intente poner la altura en una de las celdas, así:

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

Sin embargo, tenga en cuenta que no podrá hacer que la celda sea más pequeña de lo que requiere el contenido. En ese caso, primero tendría que reducir el tamaño del texto.

dar un toque
fuente
1
Estoy bastante seguro de que no usa "px" en los atributos html.
florece
10
Estoy bastante seguro de que puedes usar el atributo de estilo.
Burak Dobur
11

Establecer la tdaltura por debajo de la altura natural de su contenido

Dado que las celdas de la tabla quieren ser al menos lo suficientemente grandes para encerrar su contenido, si el contenido no tiene una altura aparente, las celdas se pueden cambiar de tamaño arbitrariamente.

Al cambiar el tamaño de las celdas, podemos controlar la altura de la fila.

Una forma de hacer esto es establecer el contenido con una absoluteposición dentro de la relativecelda y establecer el heightde la celda y el lefty topdel contenido.

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>
Expandir fragmento

La table-layoutpropiedad

Se ha table-layout: fixedaplicado la segunda tabla en el fragmento anterior , lo que hace que las celdas tengan el mismo ancho, independientemente de su contenido, dentro del elemento principal.

Según caniuse.com , no hay problemas de compatibilidad significativos con respecto al uso de a table-layoutpartir del 12 de septiembre de 2019.

O simplemente aplique widtha celdas específicas como en la tercera tabla.

Estos métodos permiten que la celda que contiene el contenido efectivamente sin tamaño creado mediante la aplicación position: absolutereciba una circunferencia arbitraria.

Mucho más simple ...

Realmente debería haber pensado en esto desde el principio; podemos manipular el contenido de la celda de la tabla a nivel de bloque de todas las formas habituales, y sin destruir por completo el tamaño natural del contenido position: absolute, podemos dejar la tabla para averiguar cuál debería ser el ancho.

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>
Expandir fragmento

Fred Gandt
fuente
¡Finalmente una respuesta que parece prometedora! Debo probarlo tan pronto como esté en el trabajo, daré comentarios si no lo olvido.
jeromej
1
¡Trabajado como un encanto! (Advirtiendo que elimina text-align: centery otros trucos de centrado ... como se basa position: absolute)
jeromej
Esto funciona para la altura en mi caso, pero cuando lo uso postion: absolute, pierdo el ancho de celda automático. Tratando de encontrar una manera de que la tabla aún calcule correctamente el ancho de la celda mientras toma control sobre la altura de la fila. ¿Alguna idea?
Ash
@ash: no estoy pensando inmediatamente en ninguna forma de mantener el ancho completamente automático después de destruir efectivamente el tamaño del contenido, pero podemos forzar que las celdas de la tabla sean arbitrariamente anchas. He ampliado el fragmento de ejemplo para mostrar un método que podría ayudarlo. Lo
pensaré un
Gracias Fred. Tenga en cuenta que podría tener encabezados (<th>) para dar un tamaño fijo a las columnas, pero luego me preocupa que los encabezados sean demasiado estrechos o demasiado anchos.
Ash
8

Poner div dentro de un td lo hizo funcionar para mí. 

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

El ancho de su mesa es del 90%, que es relativo a su contenedor.

Si aprieta la página, probablemente también apriete el ancho de la mesa. El ancho de las celdas también se reduce y el navegador lo compensa aumentando la altura.

Para que no se modifique la altura, debe asegurarse de que los anchos de las celdas puedan contener el contenido deseado. Probablemente quieras intentar arreglar el ancho de la mesa. O quizás juegue con el ancho mínimo de la mesa.

OK W
fuente
1

Tuve que hacer esto para obtener el resultado que quería:

<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>

Se negó a trabajar solo con la celda o el div y necesitaba ambos.

Jen
fuente
-5

Eso se debe a que las palabras se están ajustando y van en nuevas líneas, por lo tanto, estiran el TR. Esto debería solucionar su problema:

overflow:hidden;

Pon eso en los estilos TR. Aunque debería funcionar, ¿por qué no dejar que se estire o0?

PD. No lo he probado, así que no odio XD

Ozzy
fuente
3
No odio, pero hay una lista de estilos compatibles con el elemento TD en IE en msdn.microsoft.com/en-us/library/ms535911(VS.85).aspx . overflowno es uno de ellos.
Andy E