3

Tengo el siguiente código html para crear una tabla, lo coloco a modo de ejemplo, quiero que las filas de mi tabla se vean mas anchas (si funciona) y las mismas filas se vean mas altas (no funciona), investigando un poco me encontré lo siguiente:

El atributo height no funciona en todos los navegadores, además, su uso no está muy extendido. Las celdas por lo general tienen el alto que necesitan para que quepa todo el contenido que se le haya insertado, es decir, crecen lo suficiente para que quepa lo que hemos colocado dentro.

Se puede hacer lo que quiero directamente en HTML o se debe hacer con CSS?

  <table>
      <tr style="width:130%; height:150%;">
        <td>Enero</td>
        <td>$100</td>
      </tr>
      <tr>
        <td>Febrero</td>
        <td>$80</td>
      </tr>
    </table>

2 respuestas 2

6

Para ese efecto utiliza:

  • min-width (para el ancho)
  • height (el cuál te da la altura real)
  • min-height (la altura mínima)
  • max-height (la altura máxima)

.headt td {
  min-width: 235px;
  height: 100px;
  background-color: #433;
}

table {
  color: #4ef;
}
<table>
  <tr class="headt">
    <td>Enero</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Febrero</td>
    <td>$80</td>
  </tr>
</table>

Nota: No puedes usar porcentajes porque para ponerlo así, su parent element debe tener una altura explicita, la cual no tiene.

1
  • Gracias por responder
    – El Cóndor
    Commented el 22 dic. 2016 a las 20:55
3

Con CSS podrías utilizar height, para indicar el alto.

Ejemplo:

table {
  border: 1px solid #000;
  border-collapse: collapse;
}
table td {
  border: 1px solid #000;
  text-align: center;
  padding: 5px;
  /* Alto de las celdas */
  height: 70px;
}
<table>
  <tr>
    <td>Enero</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Febrero</td>
    <td>$80</td>
  </tr>
</table>

Nota: min-height y max-height aplicados directamente sobre un td no funcionan, ya que según el spec el efecto sobre estos no esta definido:

In CSS 2.1, the effect of 'min-height' and 'max-height' on tables, inline tables, table cells, table rows, and row groups is undefined.

1
  • Gracias tu respuesta es muy buena
    – El Cóndor
    Commented el 22 dic. 2016 a las 20:55

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.