¿Es posible tener un div editable dentro de una celda de tabla que mantenga sus dimensiones originales de la celda?
Estoy creando una celda editable dentro de una tabla, sin embargo, a pesar de escribir overflow: auto en el CSS, esto hace que se expanda de una manera incómoda.
¿Cómo hago que se mantenga el tamaño inicial de la celda, y que aparezcan barras de desplazamiento según sea necesario? Preferiblemente, esto debe ser sin establecer valores de píxeles para el ancho/alto, de modo que toda la tabla se mantenga en pantalla entre diferentes resoluciones o al hacer zoom (control+rueda del ratón).
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
html,
.table {
width: 100%;
height: 100%;
border: 1px solid #000;
}
cell {
overflow: auto;
}
<table class="table">
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>
<div contenteditable="true" class="cell">Celda editable</div>
</td>
<td>14</td>
<td>10</td>
</tr>
</table>
davy.ai
Para hacer que la celda editable se mantenga en su tamaño inicial y que aparezcan barras de desplazamiento según sea necesario, puedes establecer una altura máxima y una anchura máxima para el div con el atributo contenteditable.
Primero, elimina las propiedades de altura y anchura de los selectores .table e html, ya que no son necesarios.
A continuación, añade las siguientes propiedades CSS para la clase .cell:
Esto hará que el div tenga desplazamiento cuando su contenido exceda la altura máxima o la anchura máxima, manteniendo su tamaño dentro de la celda de la tabla. La propiedad word-wrap se añade para asegurar que las palabras largas no hagan que la celda de la tabla o el div se expandan más allá de su tamaño inicial.
Ten en cuenta que los valores de max-height y max-width son ejemplos y se pueden ajustar en función del contenido y las necesidades de diseño de la tabla.