Configuración de la altura de la fila de la mesa

136

Tengo este codigo: 

<table class="topics" >
    <tr>
        <td style="white-space: nowrap; padding: 0 5px 0 0; color:#3A5572; font-weight: bold;">Test</td>
        <td style="padding: 0 4px 0 0;">1.0</td>
        <td>abc</td>
    </tr>
    <tr>

        <td style="white-space: nowrap; padding: 0 5px 0 0; color:#3A5572; font-weight: bold;">test2</td>
        <td style="padding: 0 4px 0 0;">1.3</td>
        <td>def</td>
    </tr>
</table>

Las filas están demasiado separadas. Quiero las líneas más juntas.

Lo que hice fue agregar el siguiente CSS pero no parece cambiar nada. 

.topics tr { height: 14px; }

¿Qué estoy haciendo mal?

html css Hiromi Nagashim
fuente
Relacionado: stackoverflow.com/questions/2092696/how-to-fix-height-of-tr
Thilo

Respuestas:

165

prueba esto:

.topics tr { line-height: 14px; }

refaelos
fuente
160
No entiendo por qué esto tiene tantos votos, no resuelve el problema. Solo funciona si solo tiene 1 línea de texto en tr. Esta solución establece la altura de la línea , no la traltura.
BenR
2
Como se menciona en un comentario posterior. la altura debe ser mayor que la altura de su contenido más grande. De lo contrario, solo usará la altura del contenido más grande como la altura mínima. Y sí, esto solo funciona para una línea de texto.
Varun Chatterji
1
Es útil solo en el caso de texto de una línea.
shekhardtu
23

intente configurar el atributo para td así:

.topic td{ height: 14px };
Dave
fuente
10
Parece que no funciona (Chromium 12 / Ubuntu 11.04) .
David dice que reinstale a Mónica el
1
¿seriamente? Pensé que esto siempre habría funcionado. ciertamente lo hace ahora. de todos modos, esta es la solución que encontré mejor, ya que la forma en que funcionan las celdas de la tabla es expandir su contenido. así que heighten a tdes efectivamente altura mínima, que en este caso es realmente lo que quieres
Simon_Weaver
@dave En mi caso, solo @davela solución funcionó. line-heightno funcionó con tro td. No estoy seguro si tiene algo que ver con el tiempo ya que la publicación original tiene seis años y algunas de las reglas html / css pueden haber cambiado ya que la mayoría de los navegadores ahora están usando HTML5.
nam
Además, en mi experiencia , si establece una altura en tr y luego una altura del 100% o cualquier altura en el td dentro de ella, creo que el sistema cree que la altura se establece en el td y no sigue la altura del tr y la fila se establece en la altura predeterminada. Tan solo establezca la altura en el td. Esta es la razón por la que voté esta respuesta
user3245268
9

También puede eliminar algunos espacios adicionales si coloca una border-collapse: collapse;declaración CSS en su tabla.

fijter
fuente
6

Encontré que la mejor respuesta para mis propósitos era usar: 

.topics tr { 
    overflow: hidden;
    height: 14px;
    white-space: nowrap;
}

los white-space: nowrap es importante ya que evita que las celdas de su fila se rompan en varias líneas.

Personalmente, me gusta agregar text-overflow: ellipsisa mi thy tdelementos para hacer que el texto desbordado se vea mejor agregando los topes completos finales, por ejemploToo long gets dots...

Tom Dickman
fuente
5

line-height solo funciona cuando es más grande que la altura actual del contenido de <td>. Por lo tanto, si tiene un icono de 50x50 en la tabla, la traltura de la línea no hará que una fila sea más pequeña que 50px (+ relleno).

Como ya ha configurado el relleno 0, debe ser algo más,
por ejemplo, un tamaño de fuente grande en el interior tdque sea más grande que su 14px.

Alex
fuente
5

Si está utilizando Bootstrap, mire paddingsus tds.

1 hombre
fuente
1

una vez que necesite arreglar la altura de una fila valorada en particular usando CSS en línea de la siguiente manera ...

<tr><td colspan="4" style="height: 10px;">xxxyyyzzz</td></tr>
MD Shafiqur Rahman
fuente
1

En cuanto a mí, decidí usar rellenos. No es exactamente lo que necesita, pero puede ser útil en algunos casos.

table td {
    padding: 15px 0;
}
Eugene Porodko
fuente