Nested table border collapse is not functioning as intended

Upon inspection, it appears that border-collapse is not functioning as expected:

UPDATE: In this case, when referring to border-collapse not working, I am highlighting the issue where the inner table displays a double border, resulting in an unappealing appearance.

A more straightforward version of the code is provided below:

<style>
table, tr, td
{
    padding:0;
    margin:0;
    border-collapse: collapse;
}
td
{
    border:1px solid black;
}
</style>
<table cellpadding="0" cellspacing="0">
<tr>
    <td>Content 1</td>
    <td>Content 2</td>
    <td>Content 3</td>
</tr>
<tr>
    <td colspan="3">
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td>Content inner</td>
                <td>Content inner</td>
            </tr>
        </table>
    </td>
</tr>
<tr>
    <td>Content 1</td>
    <td>Content 2</td>
    <td>Content 3</td>
</tr>
</table>

Answer №1

To achieve the desired look, you can use a combination of border-left and border-top for the cells, along with borders on all sides except the left for the table itself. Utilize the :first-child pseudo-selector to remove the extra border-top for cells in the first row.

It's important to note that the border-collapse property may not behave as expected at first glance. For more information on its effects, refer to https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse.

For a practical example of this technique, take a look at the .table-bordered class in Twitter Bootstrap. While I attempted to provide code here, it's best to visit the Bootstrap homepage for a clearer understanding, especially since the source is in LESS format. (The initial example I shared didn't produce the desired outcome.)

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

tips for incorporating staticfiles processing into css files on django

Within my CSS stylesheets, I often have code snippets like the following: #defaultCountdown span.countdown_section { color:#fff; padding:7px 15px!important; margin-bottom:2px; font-weight:300; background:url(../img/bg-white.png); t ...

HTML5 audio recording

I have been exploring different methods to record audio using HTML5, but so far I have not found a solution. I attempted to utilize this particular example without success. It seems that the statement about lack of support from any browser may be true. ...

Enhancing the appearance of specific text in React/Next.js using custom styling

I have a table and I am currently working on implementing a search functionality that searches for an element and highlights the search terms as they are entered into the search bar. The search function is functional, but I am having trouble with the highl ...

Tips for optimizing background images for various screen sizes?

I'm experiencing an issue with my background image where the head is being cut off on larger screens. Is there a way to ensure that the entire picture is always displayed regardless of screen size? The initial property for background-size is set to co ...

Troubleshooting problems with the CSS code for a progress bar in Gmail

I recently came across a unique progress bar design on Gmail and wanted to implement something similar. I found some code snippets on this webpage: . However, I encountered an issue where the progress bar was only displaying in Internet Explorer but not in ...

The issue with Angular 2's Parameterised router link component not fully refreshing

I'm trying to figure out how to show a set of images when I click on a specific menu item. The menu structure looks like this: <ul id="demo23" class="collapse"> <li> <a [routerLink]="['image-gallery','Picasso ...

What is the best location to integrate jQuery UI Bootstrap in a Rails project

In order to use Bootstrap and jQuery UI together in my application, I decided to integrate jQuery UI Bootstrap. Unfortunately, many of the gems that handle asset pipeline integration seem outdated, so I opted to manually download the CSS files and insert t ...

Guide on linking navigation to various buttons on the Angular menu

I am looking to enhance the functionality of my left menu buttons by adding a navigation path to each one (excluding the main menu). The menu items' names are received as @Input. I have set up a dictionary mapping all the items' names to their r ...

What is the method for creating a rectangle with text inside using HTML and CSS?

Hello, I need help with achieving this design using HTML and CSS. Can you assist me, please? https://i.stack.imgur.com/xOHVX.jpg This is what I have attempted so far: Below is my CSS code: .line-lg{ width:120%; text-align: center; border-bot ...

Is it possible to use JavaScript to forcefully transition a CSS keyframe animation to its end state?

One dilemma I am facing involves CSS keyframe animations triggered by scroll behavior. When users scroll too quickly, I would like JavaScript to help send some of the animations to their 'finished/final' state, especially since the animations bui ...

In React-bootstrap, is there a way for a custom class to take precedence over the btn and btn-danger classes without relying on IDs or !important, and only utilizing

I have been using React-bootstrap to style my buttons, however, I am facing difficulty in overriding the default btn and btn-danger classes provided by Bootstrap. Is there a way for my custom class slotTiming-box-button to take precedence over the btn and ...

Tips for dynamically adding and removing keys from a JSON object

I am working on a code for a car rental website using jQuery mobile. I need to dynamically add and remove keys from a JSON object with true or false values. The goal is to make a selected car unavailable by changing the "available" key to either true or ...

How to use CSS animations to remove an element from the DOM

My website has a structured HTML layout with product containers and individual products. I also have a JavaScript function that can remove any product from the page. <div class="products-container"> {foreach from=$cart.products item=product} & ...

Experiencing an issue where the canvas element fails to render on mobile Chrome browser,

I've encountered an issue with a script that draws a canvas based on the background color of an image. The image is loaded dynamically from a database using PHP. The responsive functionality works fine on mobile Safari, but not on Chrome. When the re ...

refusing to display the pop-up in a separate window

Hi there, I'm having an issue with a link that's supposed to open in a pop-up but is instead opening in a new tab. I'd like it to open in a proper pop-up window. <button class="button button1" onclick=" window.open('te ...

Shadows on menu buttons transform when clicked using React and CSS

I'm currently working on customizing the styling of a menu using CSS in a project that involves the use of "react-horizontal-scrolling-menu". While I've been successful in styling the menu items with .menu-item:hover & .menu-item:active, I am ...

There was an issue encountered when trying to call a PHP file within an HTML table using Ajax and data.html

For a small project, I have various news items that need to be included from the "news_all.php" file into table data within the "dashboard.php" file. Due to the predefined root structure restrictions, using include('news.php') is not an option. I ...

refreshing a javascript function without the need for reloading

Attempting to create an embedded web server using the Nano WiReach SMT. Here is the code that has been written so far: <HTML> <HEAD> <SCRIPT LANGUAGE=JavaScript> function swapImage() { var val1 ...

How can I eliminate excess cell spacing from a div that has a display of inline table?

This situation is really frustrating. While using Firefox and Opera, I am encountering unnecessary padding between my nested divs, which is not the case with Chrome and Safari. I attempted to use border-collapse:collapse However, it did not work. Do you ...

Display unique menus for both users and administrators

I have been researching extensively to find a solution to my problem, but I am struggling to make things work properly. Here is the code I currently have: Login script: $submitted_username = ''; if(!empty($_POST)) { ...