Skip to main content
se eliminaron 64 caracteres en el cuerpo
Origen Enlace
MattAllegro
  • 487
  • 3
  • 13

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;
  /* PARA MARCAR LA SEPARACION LAS CELDAS DE LA TABLA  */
  padding: 0;
  margin: 0
}

table.tabla_televisor tr td {
  border: 3px solid #000;
  /* PARA MARCAR LA SEPARACION LAS CELDAS DE LA TABLA  */
  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><<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>

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

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.

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;
  /* PARA MARCAR LA SEPARACION LAS CELDAS DE LA TABLA  */
  padding: 0;
  margin: 0
}

table.tabla_televisor tr td {
  border: 3px solid #000;
  /* PARA MARCAR LA SEPARACION LAS CELDAS DE LA TABLA  */
  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>

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

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>

Origen Enlace
MattAllegro
  • 487
  • 3
  • 13

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.

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;
  /* PARA MARCAR LA SEPARACION LAS CELDAS DE LA TABLA  */
  padding: 0;
  margin: 0
}

table.tabla_televisor tr td {
  border: 3px solid #000;
  /* PARA MARCAR LA SEPARACION LAS CELDAS DE LA TABLA  */
  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>

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