Using a nested table will override the "table-layout: fixed" property

I'm currently working on creating a tabular layout and I'm in need of the following:

  • 2 columns with variable widths
  • Columns that are equal in width
  • Columns that are only as wide as necessary

After some research, I discovered that by setting "table-layout: fixed" and both columns to have a "width: 50%", my desired layout can be achieved. Here's an example demonstration:

CSS:

    .mytable {
      border-collapse: collapse;
      table-layout: fixed;
    }
    .fifty {
      width: 50%;
    }

HTML:

    <table class="mytable" border=1>
        <tr>
            <td class="fifty">hello</td>
            <td class="fifty">x</td>
        </tr>
        <tr>
            <td class="fifty">a</td>
            <td class="fifty">longer</td>
        </tr>

        <tr>
            <td class="fifty">reallyreallylong</td>
            <td class="fifty">medium</td>
        </tr>
    </table>

Although this perfectly fits what I require, there is one issue - when this table is nested within another table, all column widths shrink to the smallest size possible (at least on my Chrome browser).

For further clarification, you may refer to this jsFiddle link showcasing my problem: http://jsfiddle.net/KTkZm/

If anyone has any insights or solutions on how to maintain the inner table rendering the same as it does outside of the table, I would greatly appreciate it!

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

The custom CSS styling is triggered only when the page is resized in Bootstrap

Currently, I am utilizing bootstrap alongside my custom CSS. The issue I am facing is that some of the styling from my custom CSS only takes effect after resizing my browser window to a smaller size. My custom CSS seems to be applied when the website adapt ...

Records were successfully updated and a confirmation message was received, however the changes did not reflect in the database

I am working on creating an "edit_post" page for my website to allow users to edit their previously posted content. Although I receive a notification saying "Updated data successfully," the changes are not being reflected in the MySQL database. <?php ...

Discover the secrets to replicating the mesmerizing horizontal scrolling menu akin to the

What is the most effective way to create a horizontal menu similar to the innovative Google picture menu? Could someone kindly share their knowledge and provide the code for achieving the same outcome? ...

Something strange happening with the HTML received after making a jQuery AJAX request

My PHP form handler script echoes out some HTML, which is called by my AJAX call. Below is the jQuery code for this AJAX call: $(function() { $('#file').bind("change", function() { var formData = new FormData(); //loop to add ...

How can I retrieve dt/dd elements and store them in an array using Simple HTML DOM?

Similar Question: Retrieving data from HTML table using preg_match_all in PHP This is the HTML code snippet: <div class="table"> <dl> <dt>ID:</dt> <dd>632991</dd> <d ...

Is it possible to conduct a feature test to verify the limitations of HTML5 audio on

Is there a way to detect if volume control of HTML5 audio elements is possible on iOS devices? I want to remove UI elements related to the volume if it's not alterable. After referring to: http://developer.apple.com/library/safari/#documentation/Aud ...

Is there a way to enlarge an iFrame to fill the entire screen with just a button click, without using JavaScript

I am currently attempting to achieve full screen mode for an iFrame upon clicking a button, similar to the functionality on this site. On that website, there is a bar that expands to full screen along with the embedded game, which is what I am aiming for. ...

What methods can I use to eliminate an iframe virus that has infected all my PHP files on my website?

I'm facing a challenge with eliminating a virus code from my php files. All 1200+ php files on my server have been infected by this malicious code, which injects the following line into the html output: Here is the virus code: <tag5479347351>& ...

Are HTML's Regular Expressions the Equivalent of JavaScript's Regular Expressions?

I have been trying to utilize the pattern="" attribute in HTML to implement regex, but unfortunately, I am unable to locate a comprehensive list of HTML regex parameters. This has led me to ponder whether the syntax for regex in HTML is similar to JavaSc ...

Animating a SVG element within a group tag using the path element

I'm struggling to make a slice of a circle rotate using the :hover selector in CSS. Even though my initial attempt at applying CSS transformations works perfectly, the rotation stops when I introduce the :hover selector. Below is the HTML and CSS co ...

Tips for organizing three flexbox divs in a horizontal row

Within the content div, I have three separate divs that resize when the browser window is adjusted. The blue and red divs should maintain a fixed width The green div should resize to fill any available space on the left I attempted to accomplish this usi ...

Button from Material-UI vanishes upon being clicked

I encountered an issue with a button that disappears when clicked on. Additionally, clicking the button once does not trigger any actions associated with it. In order to execute the button actions, I have to click the area where the button was located afte ...

Is it possible to set all UI forms to a readonly/disable mode?

We have a specific requirement where, if the user's access level is set to "READ ONLY", all form input elements should be made readonly. Our coding approach involves using a template HTML that contains widgets which are referenced in the correspondin ...

Can JavaScript trigger an alert based on a CSS value?

Hello, I am facing an issue. I have created a blue box using HTML/CSS and now I want to use JavaScript to display an alert with the name of the color when the box is clicked. Below is my code: var clr = document.getElementById("box").style.background ...

Separating buttons (two buttons switching on and off simultaneously) and displaying the corresponding button based on the data

My current project involves creating a registration page for specific courses. While I am able to display the information correctly, I am facing an issue with the ng-repeat function. The problem lies in all the Register buttons toggling incorrectly. Additi ...

Retrieving Dynamic data from an HTML form and saving it in PHP variables

Currently, I am in the process of taking an online aptitude test where 2 random questions are selected from a database and displayed on the webpage for answering. The issue I'm facing is that the values are not being stored correctly in the database. ...

Exploring the integration of Tailwind CSS code within a basic HTML file for utilization in a React project

I have been incorporating Tailwind CSS code in my React projects, mostly within a CSS file using @apply. Now I am interested in transitioning to simple HTML with the Tailwind CDN. How can I make this switch seamlessly? Here is an example of what I current ...

How to trigger the submission of a form within the submission event of another form using jQuery

I am encountering an issue with having two forms on a single page. Whenever I click on the submit button of the parent form, the parent form's submit event is triggered. In this event, I have included logic to submit the second form using the submit m ...

Having trouble with the auto width CSS for the center section of my webpage

I am facing an issue with assigning widths to my divisions using the CSS calc property. Despite setting the width for the first and last divisions, I am unable to allocate any width to the middle division. HTML: <div style="width:400px;"> <div ...

JQuery's document.ready function triggers prematurely on dynamically loaded HTML content

When loading dynamic content, I use the following method: $('#my-div').load('my.html'); The code inside my.html looks like this: <html> <head> </head> <body> <script> $(fu ...