I am in need of a span element inside a td tag that I am generating within a table.
In order to ensure the span fills the td, I have set it as an inline-block with a width and height of 100%. However, when pressing the delete key in the last cell, it starts deleting content outside of the table.
If I define the span as display: table-cell, this prevents the deletion of external content but causes issues with filling the parent td. The presence of the span is essential to prevent the deletion of other content within the td.
Is there a CSS property I can add to a class that will restrict the delete function to only affect content inside that container?
<div contenteditable ="true">
<table contenteidtable ="false" class="a">
<tbody contenteditable="false">
// Table contents here
</tbody>
</table>
<p>
Some text here
</p>
// Second table
</div>
<!-- CSS styling -->
The above jsfiddle includes two tables. The main distinction between them is that the first table has a span with a display type of table-cell, while the second uses inline-block.
When you click on cell 9 in the first table and begin deleting, it correctly removes only the cell's content, although the span fails to fill the TD in this case.
On the contrary, the second table successfully fills each TD with the span. Yet, once you click on cell 9 in this table and press the delete key, it extends beyond the table boundaries to erase the "some text here" content located outside.