Cómo ajustar la fila de la tabla HTML a su contenido

Mi

tiene tres filas y columnas, con la última fila de la tabla como esta:

 

Ahora, lo extraño que no puedo entender es que el

es casi el doble de su contenido. Tanto


como

juntos se alinean bastante bien con la parte superior de la fila de la tabla, y luego hay casi 150 píxeles de espacio vacío en la parte inferior de la tabla. El relleno y el margen y borde para todos los elementos son 0, y no hay mucho otro estilo en la tabla o sus filas / columnas que no sea esto:

 html, body, table { width: 100%; height: 100%; } 

¿Cómo puedo hacer que la fila de la mesa se ajuste a la altura de su contenido y deshacerme del gran espacio en la parte inferior? He asignado la altura a la tabla aquí para asegurarme de que se extienda hasta la parte inferior de la ventana si la ventana es más grande de lo que sería la mesa. Supongo que es donde se origina el

demasiado grande. Para compensar ese tramo, intenté agregar el

adicional sobre el mapa del sitio con una min-height:100px; max-height:none;min-height:100px; max-height:none; pero eso no ayudó.

EDITAR errores tipográficos.

EDITAR Tal vez un poco más de antecedentes sobre esto.

 + -------------------------------- + ventana del navegador (cuerpo html)
 |  + ---------------------------- + |
 |  |  imagen de banner |  |  hay una imagen de banner aquí que se extiende por la página
 |  + ---------------------------- + |
 |  |  barra de menú css |  |  un menú CSS estándar construido desde ul
 |  + ---------------------------- + |  aquí es donde comienza la mesa, tiene tres columnas
 |  |  td |  td |  td |  |
 |  |  |  |  |  |
 |  + ---------------------------- + |
 |  |  tr colspan = 3 para hacer espacio |  |  hay una columna para hacer espacio entre el contenido de arriba y el mapa del sitio a continuación
 |  + ---------------------------- + |
 |  |  tr colspan = 3 para el mapa del sitio |  |  tr desde arriba, el mapa del sitio que se extiende mucho hacia abajo si la tabla {altura: 100%;  }
 |  + ---------------------------- + |
 |  |  este es el espacio en ventanas grandes cuando la tabla no tiene ajuste de altura.
 + -------------------------------- +

¡Gracias por los comentarios! Eliminando la table { height: 100%; } table { height: 100%; } no funcionó porque no estira la tabla al final de la página. Este estiramiento es lo que quería, pero creo que esto también es lo que causó el

excesivamente inflado al que se refiere esta pregunta.

La solución a esto fue más un accidente:

 
...

Con esto, la fila se reduce al tamaño de su contenido, mientras que la tabla aún se extiende hasta el final de la página. No estoy seguro si esta es una solución “saludable”, pero está claro que funciona.

eliminar altura

 html, body, table { width: 100%; } 

y se ve así (no más sobrecarga en

height )

enter image description here

¿Por qué 100% de altura en html y body todos modos? Además, cambiaría There's a

    here

There's a <ul> here

Una vez que arregle sus tags y las cierre correctamente, verá que la altura del TR es tan grande porque los márgenes de UL están estirando, si modifica el CSS para esta etiqueta, será más pequeño, revíselo aquí.

 ul { margin: 0; padding: 0; } 

Por otro lado, como su tabla tiene solo 1 fila, si agrega la height: 100% del estilo height: 100% a la tabla, esa fila se extenderá al máximo, puede modificar el estilo para dejarlo así. Verifíquelo

 table { width: 100%; } 

http://jsfiddle.net/9jMR8/ Tal vez así? Cambió el bg-color de la div ..

Cambió el CSS así:

 html, body{ width: 100%; height: 100%; } table{ border:1px solid black; width:100%; } div{ background-color:blue; } 


There's an unordered list in here