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 :)