¿Cómo arreglar la altura de TR?

Question

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

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

He intentado varias maneras: 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> 

Answer 1

Las tablas son dudosas (al menos, en IE) cuando se trata de fijar alturas y no envolver el texto. Creo que usted encontrará que la única solución es poner el texto dentro de un elemento div, 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>

De esta manera, la altura del div 's es la de la célula que contiene y el texto no puede crecer div, manteniendo la celda/fila a la misma altura sin importar el tamaño de la ventana.

Answer 2

trate de poner la altura en una de las células, así:

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

Nota sin embargo, que usted no será capaz de hacer que la célula más pequeña que el contenido requiere que sea. En ese caso, primero tendría que hacer que el texto sea más pequeño.

Answer 3

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

Si exprime la página, probablemente también exprima el ancho de la tabla. El ancho de las celdas también se reduce y el navegador lo compensa al aumentar la altura.

Para tener la altura intacta, debe asegurarse de que el ancho de las celdas puede contener el contenido intentado. La reparación del ancho de la mesa probablemente sea algo que quieras probar. O tal vez jugar con el ancho mínimo de la mesa.

Answer 4

Esto se debe a que las palabras se envuelven y van en líneas nuevas, por lo tanto, se extiende el TR. Esto debería solucionar su problema:

overflow:hidden; 

poner eso en los estilos TR A pesar de que debería funcionar, ¿por qué no dejar que se extienden o0

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

Answer 5

Ajuste de la altura td a menos que el naturales altura de su contenido

Desde celdas de la tabla quieren ser al menos lo suficientemente grande como para envolver su contenido, si el contenido no tiene altura aparente, las células se pueden redimensionado 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 posición absolute dentro de la célula relative, y establecer el height de la célula, y la left y top del contenido.

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>

Answer 6

que tenía que hacer esto para conseguir 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 negaron a trabajar únicamente con la célula o el div y necesitaba tanto.

Answer 7

Poner div dentro de una 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>