div - title label html
¿Cómo arreglar la altura de TR? (7)
¿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.
Intenté de 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> </td>
<td>Date of Visit</td>
<td> </td>
<td colspan="3">Care Time Started</td>
<td> </td>
<td rowspan="2" style="text-align:right;vertical-align:bottom;">☑</td>
<td rowspan="2" style="font-weight:bold;vertical-align:bottom;">Tick when<br/> care starts</td>
</tr>
<tr>
<td width="90" class="tableContainerRow2"> </td>
<td > </td>
<td width="80" class="tableContainerRow2"> </td>
<td > </td>
<td width="40" class="tableContainerRow2"> </td>
<td width="5">:</td>
<td width="40" class="tableContainerRow2"> </td>
<td > </td>
</tr>
</table>
Establecer la altura td a menos de la altura natural de su contenido
Como las celdas de la tabla quieren ser al menos lo suficientemente grandes como para ocultar su contenido, si el contenido no tiene una altura aparente, las celdas pueden redimensionarse arbitrariamente.
Al cambiar el tamaño de las celdas, podemos controlar la altura de la fila.
Una forma de hacerlo es establecer el contenido con una posición absolute dentro de la celda relative , y establecer la height de la celda, y la left top e left 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>
El ancho de su mesa es del 90%, que es relativo a su contenedor.
Si exprimes la página, probablemente estés apretando el ancho de la mesa también. 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 pueda 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.
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 tu problema:
overflow:hidden;
Ponlo en los estilos TR Aunque debería funcionar, ¿por qué no dejarlo estirar o0?
PD. No lo he probado, así que no odio XD
Intenta poner la altura en una de las celdas, como esta:
<table class="tableContainer" cellspacing="10px">
<tr>
<td style="height:15px;">NHS Number</td>
<td> </td>
Sin embargo, tenga en cuenta que no podrá hacer que la celda sea más pequeña de lo que el contenido lo requiere. En ese caso, primero tendría que hacer que el texto sea más pequeño.
Las tablas son dudosas (al menos, en IE) cuando se trata de fijar alturas y no envolver el texto. Creo que encontrarás 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 forma, la altura del div es la de la celda contenedora y el texto no puede hacer crecer el div , manteniendo la celda / fila a la misma altura sin importar el tamaño de la ventana.
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;"> </div></td></tr>
Tenía 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 célula o div y ambos necesitaron.