duplicate styling for individual table cells

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.

Answer №1

This might not cover everything, but it's a good starting point. I made some adjustments to the styles for table b in the HTML and included the 'scoped' attribute.

<style scoped>
    table.b > tbody > tr > td > span {
        width: 100% !important;
        height: 100% !important;   
        display: inline-block;
        word-wrap: break-word;
        white-space: pre-wrap;
        overflow-wrap: break-word;
        padding: 0px !important;
        margin: 0px !important;
        background-color: coral !important;
        border: none !important;
        outline: none !important;
    }
</style>

Check out this article for more information:

I just learned something new myself. Hopefully, this will be helpful to you.

Answer №2

Aha! I understand now. The main container is enclosed within

<div contenteditable ="true">
. This means all elements inside it will also inherit this property. To fix this, simply move the final <p> outside of the div.

For more information on the contenteditable attribute, check out this link.

"If the attribute is not explicitly set, it will inherit the value from its parent element."

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Switching between displaying or hiding one of two backgrounds within a div using CSS and jQuery

Seeking guidance on implementing a two-background div setup where A is constantly displayed within the element and toggling B based on button control click. HTML <div class="container"></div> CSS .container{ url(B.png) 10px 10px no-repeat ...

Preventing the reoccurrence of function events

I need to create an event triggered by a mouse click when the user clicks a button. The code snippet below shows my attempt, but I'm facing an issue where the function continues to run if the user clicks on a second input field after the initial one: ...

Do arrays permanently retain the strings stored within them?

As an 11-year-old who has been learning Javascript for the past month and a half, I am currently working on creating a login/register system. Right now, my focus is on the register part. I have a question: when adding a string/number/boolean to an array, d ...

In Bootstrap 4, the positioning of :after is different compared to Bootstrap 3

Our bootstrap nav-tabs have a unique default look with an 'indicator' icon below the selected tab. This is achieved by styling the active anchor element as follows: https://i.sstatic.net/UQos5.png However, when migrating to bootstrap 4, we noti ...

Is the script failing to retrieve the innerHTML content?

Here is a snippet of HTML code: <div id="team_players"> <h3>Players</h3> <button class="bold-btn" onclick="teamAct('player_list');">Refresh List ↻</button> <table> <thead> <tr> ...

Performing arithmetic calculations using HTML

Can math operations be done directly within an HTML element, such as <div width="50/2">, or is it necessary to use Javascript or CSS for this functionality? ...

What is causing the button to prevent file selection?

What's causing the button to not allow file selection when clicked on? Interestingly, placing a span or div in the label enables file selection upon clicking them, but not with the button. <html> <body> <label> <input t ...

What methods can I use to prevent floated child divs from wrapping?

I'm currently working on creating a carousel-like feature where users can select radio buttons within various div elements. The concept involves having approximately 20 divs, each 150px wide, containing radio buttons. I want to prevent these 20 divs f ...

Can you modify the current HTML code of a Wix website?

I am currently developing a website using Wix and have encountered an issue with the page description. Despite editing it in Wix, the changes are not reflecting on the live site. Upon inspecting the source code in Chrome, I identified the problem lies wi ...

Navigate to the following section on an HTML page by clicking a button using jQuery

Within my application using Jquery / Javascript, I am looking to implement a specific functionality. I currently have several div elements like the ones below: <div id="div1"></div> <div id="div2"></div> <div id="div3"></ ...

I am looking to enhance a button's appearance by applying CSS styling with a combination of two distinct flat colors

Is there a way to apply CSS styling to a button by incorporating two distinct flat colors? Specifically, I would like the left half of the button to be blue and the right half to be red. ...

Caution: The `className` property does not align with Material UI css which may cause issues upon reload

https://i.stack.imgur.com/MxAiY.png If you are facing the error/missing CSS, check out this video for a visual representation. While older versions of similar questions exist on Stack Overflow such as React + Material-UI - Warning: Prop className did not ...

What are the most effective strategies for creating cross-platform components using Vue.js 2.0?

In my current project, I am looking to create a universal component library using Vue.js 2.0 that can be seamlessly integrated across various platforms. The focus of this query lies in establishing the most effective styling practices for components. Typi ...

Concealed upper TD boundary in IE 8

I've been struggling all day to figure out this style issue without any success. http://jsfiddle.net/9HP9Q/1/ The table lines should have gray borders around them. It's working fine on all browsers except Internet Explorer 8. .order_table tab ...

Steps to transforming a standard array into a multidimensional array

I have a JSON array that is generated after submitting a form using the formSerialize function. Here is an example of how the array looks: [ {"name":"client_management-testmonitoring","value":"0"}, {"name":"client_operations-testmonitoring","v ...

Display HTML content using AJAX within a div element

Within my HTML code, I have the following: <li class="register"><a href="">Registreer</a></li> as well as <div id="content"> </div> I attempted to load an HTML file into the div using the code below in the header se ...

"Utilizing Box elements, implementing linear gradients, styling with CSS, and

Currently, I am working on a project that involves using react JS and I am trying to find a solution for implementing linear gradient in multiple boxes. Specifically, I want to achieve the effect of having three identical boxes lined up next to each other. ...

What is the most effective way to transfer color values from one div to another?

When recreating a game similar to Mastermind, I encountered a challenge of copying color values from one div to another upon clicking a button. Despite browsing the web, I haven't found a solution for this specific situation. Below is the code I have ...

Tips for adjusting the width of an HTML element that is set to position: fixed

<div class="ui-datatable-scrollable-view" style=" width: 100%; position: relative; "> <div class="ui-widget-header ui-datatable-scrollable-header" style="position:fixed;top:50px"> </div> </div> ...

What is the best way to allocate a larger size to one part of a flex div?

A div is used to insert information <div class="inputs"> <div class="content">@Html.TextBoxFor(model => invoices.ProductDesc, new { disabled = "disabled", @readonly = "readonly" })</div> <div class="content">@Html.TextBo ...