2

Estoy ingresando unos datos en una tabla HTML, pero cuando intento ingresar un texto de un tamaño mayor la fila de la tabla también aumenta de tamaño...

introducir la descripción de la imagen aquí

Como pueden ver, la fila inferior aumentó su tamaño respecto a la fila superior que es el tamaño original...

Como puedo mantener el tamaño de un <tr> o fila de la tabla fijo, independientemente del tamaño del contenido que se le ingrese, también estoy usando bootstrap:

table.tabla_televisor {
  border-collapse: collapse;
  background: #82FA58;
  border: 0px;
  border-spacing: 0px;
  padding: 0px;
  margin: 0px;
}

table.tabla_televisor tr {
  border: 3px solid #000;
  /* PARA MARCAR LA SEPARACION LAS CELDAS DE LA TABLA  */
  padding: 0px;
  margin: 0px;
}

table.tabla_televisor td {
  border: 3px solid #000;
  /* PARA MARCAR LA SEPARACION LAS CELDAS DE LA TABLA  */
  height: 163px;
  padding: 0px;
  margin: 0px;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<table class="tabla_televisor" style="font-size: 22pt; text-align:center; padding: 0px" border="0" cellspacing="0" cellpadding="0">

  <tr style="height:163px">
    <td style="font-size: 50pt; color: black; width:180px; height:163px"></td>
    <td style="font-size: 50pt; color: black; width:180px;  height:163px">I4</td>
  </tr>

  <tr style="height:163px">
    <td style="font-size: 130pt; color: red; width:180px; height:163px">2</td>
    <td style="font-size: 130pt; color: red; width:180px; height:163px">I3</td>
  </tr>

</table>

1
  • ¡Hola! ¿Alguna respuesta fue útil? Commented el 20 abr. 2020 a las 17:06

3 respuestas 3

2

Encontré una solución (fiddle), pero esperaba que fuera más simple.

Primero, cellspacing, cellpadding y estilos en línea no son HTML5: queremos evitar mezclar DOM (HTML) y estilos (CSS).

Después de decir esto, introduje las div en las td y usé los atributos transform (y, si es necesario, overflow) de las div.

También tenga cuidado de no confundirse con pt y px!

Lo siento pero solo hablo italiano y utilicé el traductor de Google :)

table.tabla_televisor {
  border-collapse: collapse;
  background: #82FA58;
  border: 0;
  border-spacing: 0;
  padding: 0;
  margin: 0;
  font-size: 22pt;
  text-align: center
}

table.tabla_televisor tr {
  border: 3px solid #000;
  padding: 0;
  margin: 0
}

table.tabla_televisor tr td {
  border: 3px solid #000;
  width: 180px;
  padding: 0;
  margin: 0
}

tr.cincuenta td {
  font-size: 50pt;
  color: #000
}

tr.cientotreinta td {
  font-size: 130pt;
  color: #f00
}

table.tabla_televisor tr td div {
  height: 163px;
  max-height: 163px;
  overflow: visible;
}

tr.cincuenta td div {
  transform: translate(0, 20px);
}

tr.cientotreinta td div {
  transform: translate(0, -60px);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<table class="tabla_televisor">

  <tr class="cincuenta">
    <td><div> </div></td>
    <td><div>I4</div></td>
  </tr>

  <tr class="cientotreinta">
    <td><div>2</div></td>
    <td><div>I3</div></td>
  </tr>

</table>

1
  • 1
    Excelente, era justo lo que necesitaba en aquella ocasión, y no había vuelto a revisar esto hasta que vi las notificaciones viejas e ingresé por curiosidad... Muchas gracias... Commented el 7 dic. 2020 a las 2:50
0

La propiedad adecuada para definir un valor maximo del ancho de un elemento es max-width

Modificando tu documento seria así. (modificale el valor. puse 150px a modo de ejemplo)

 <table class="tabla_televisor" style="font-size: 22pt; text-align:center; padding: 0px" border="0" cellspacing="0" cellpadding="0">

  <tr style="height:163px">
    <td style="font-size: 50pt; color: black; max-width:100px; height:163px"></td>
    <td style="font-size: 50pt; color: black; max-width:100px;  height:163px">I4</td>
  </tr>

  <tr style="height:163px">
    <td style="font-size: 130pt; color: red; max-width:100px; height:163px">2</td>
    <td style="font-size: 130pt; color: red; max-width:100px; height:163px">I3</td>
  </tr>

</table>

se vería así

introducir la descripción de la imagen aquí

3
  • 1
    Creo que el problema expuesto en la pregunta se refiere al alto y no al ancho
    – Alvaro Montoro
    Commented el 17 feb. 2019 a las 8:03
  • si, efectivamente como dice @Alvaro Montoro la idea es mantener el alto de las celdas fijo... intenté con max-height pero creo que esa propiedad no existe , porque no funcionó... Commented el 17 feb. 2019 a las 11:54
  • max-height si existe. En caso de mantener el alto puede usarla Commented el 17 feb. 2019 a las 16:05
0

Puedes utiliziar 'min' y 'max' 'height' y 'width' para forzar las dimensiones del contenedor, en este caso tu 'td', pero además puedes darle propiedades al texto para que no se salga del mismo utilizando como en el ejemplo que aquí de dejo: 'text-overflow: ellipses' para que salgan puntos suspensivos, 'overflow-wrap:break-word' para que se rompa la palabra y salte de linea una vez ocupe todo el espacio asignado, y 'white-space:nowrap' para corregir que el contenedor se deforme si sobrepasa su espacio límite:

table.tabla_televisor {
  border-collapse: collapse;
  background: #82FA58;
  border: 0px;
  border-spacing: 0px;
  padding: 0px;
  margin: 0px;
}

table.tabla_televisor tr {
  border: 3px solid #000;
  /* PARA MARCAR LA SEPARACION LAS CELDAS DE LA TABLA  */
  padding: 0px;
  margin: 0px;
}

table.tabla_televisor td {
  border: 3px solid #000;
  /* PARA MARCAR LA SEPARACION LAS CELDAS DE LA TABLA  */
  max-height: 163px;
  padding: 5px;
  margin: 0px;
  font-size: 80px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: break-word;
  text-overflow: ellipsis;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<table class="tabla_televisor" style="font-size: 22pt; text-align:center; padding: 0px" border="0" cellspacing="0" cellpadding="0">

  <tr style="height:163px">
    <td style="font-size: 50pt; color: black; width:180px; height:163px"></td>
    <td style="font-size: 50pt; color: black; width:180px; height:163px">I4</td>
  </tr>
  
   <tr style="height:163px">
    <td style="font-size: 130pt; color: red; max-width:180px; height:163px">2</td>
    <td style="color: red; max-width:180px; height:163px">I3</td>
  </tr>

  <tr style="height:163px">
    <td style="font-size: 130pt; color: red; max-width:180px; height:163px">2</td>
    <td style="color: red; max-width:180px; height:163px">I333333333333333333333333333333333333333</td>
  </tr>
  
  <tr style="height:163px">
    <td style="font-size: 130pt; color: red; max-width:180px; height:163px">2</td>
    <td style="color: red; max-width:180px; height:163px">I33</td>
  </tr>

</table>

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.