Using `overflow: hidden` on a table will result in the bottom and right borders disappearing

I am facing an issue where the border of my table is being cut off when using overflow: hidden. Below is an example code snippet illustrating this problem.

    <style>
        table {
            border-collapse: collapse;
        }

        table {
            border: 1px solid black;
            overflow: hidden;
        }

    </style>

    <body>
        <table>
            <thead>
                <tr>
                    <th>header 1</th>
                    <th>header 2</th>
                    <th>header 3</th>

                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>side header</th>
                    <td>data 1</td>
                    <td>data 2</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th>footer header</th>
                    <td>footer 2</td>
                    <td>footer 3</td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>

I have stripped down my example to just the essentials. Removing the border-collapse style fixes the issue, but I need that style for my code structure. This hacky workaround in the CSS below seems to work temporarily, but I'm not a fan of using hacks!

.borderhack:after {
            content: '\00a0';
            position: absolute;
            border: 1px solid black;
            left: -2px;
            top: -2px;
            width: 100%;
            height: 100%;
            z-index: -10;
        }

        table {
            position: relative;
        }

I would greatly appreciate any explanations or alternative solutions to this problem. After spending a considerable amount of time investigating, I am eager to understand why this is happening.

Thank you

Answer №1

Here are two simple fixes:

  1. Try using a 2px border width.
  2. Consider using outline instead of border.

For example:

table {
  border-collapse: collapse;
  border: 2px solid black;
  overflow: hidden;
}

or

table {
  border-collapse: collapse;
  outline: 1px solid black;
  overflow: hidden;
}

http://jsfiddle.net/6NVtS/1/

The reason behind this issue could be that with the collapsed border model for table borders, the browser attempts to split the border in the center. However, when dealing with a one-pixel outside border, the browser ends up using a full pixel width on top and left, while nothing is displayed on bottom and right. This behavior is likely specified in the standards, but the combination of an outside border and overflow:hidden causes the cropping of the bottom and right edges since they are technically shifted half a pixel to the right and considered 'outside' the element's region. Outline, on the other hand, is not affected by overflow - the reason for this exception is unclear.

http://www.w3.org/TR/CSS21/tables.html#collapsing-borders

An alternative solution could involve applying overflow to td and th elements instead of the entire table or reassessing the necessity of setting overflow at all.

Answer №2

Is there any purpose in implementing border-collapse when there are no borders to merge? Try eliminating the border-collapse property and your design should look better.

To see a demonstration, click on this link: http://jsfiddle.net/86xST/

Answer №3

After consulting with skrivener and conducting additional research, I finally cracked the code on this issue. You can find the resolution here.

The Problem - uneven border collapsing around a table:

.table1 {

    border          : 3px solid black;
    overflow        : hidden;
    border-collapse : collapse;
}

The Solution - avoid specifying the border width in the border property and instead use border-width:

.table2 {

    border          : solid black;
    overflow        : hidden;
    border-collapse : collapse;
    border-width    : 6px 7px 7px 6px;
}

th {

    border: 1px solid black;
}

th {

    border: 1px solid black;
}

The Issue:

<table class="table1">
    <thead>
        <tr>
            <th>header 1</th>
            <th>header 2</th>
            <th>header 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>side header</th>
            <td>data 1</td>
            <td>data 2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>footer header</th>
            <td>footer 2</td>
            <td>footer 3</td>
        </tr>
    </tfoot>
</table>

The Resolution:

<table class="table2">
    <thead>
        <tr>
            <th>header 1</th>
            <th>header 2</th>
            <th>header 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>side header</th>
            <td>data 1</td>
            <td>data 2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>footer header</th>
            <td>footer 2</td>
            <td>footer 3</td>
        </tr>
    </tfoot>
</table>

Skrivener mentioned:

"The reason for this behavior, as I understand it, is that when utilizing the collapsed border model for table borders, the browser attempts to divide the border evenly. With a one-pixel outer border, this is not feasible, so the browser defaults to full pixel width on top/left borders and none on bottom/right borders."

This led me to experiment with manually setting the border-width for all four sides and adding an extra 1px to the right and bottom borders. Check out the solution to see how this adjustment achieves equal width outer borders. Now, regardless of the scenario, you can ensure consistent border widths by simply adjusting the right and bottom borders by 1px. Thanks again for the invaluable assistance!

Answer №4

Consider implementing the following suggestions: 1. Add a margin to your table 2. Utilize the table-layout: fixed property 3. Ensure that you are setting the correct parameters

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

What is the best way to include a subscript (small letter) beneath a word using html and css bootstrap 5?

Is it possible to add a small letter (sub) below a word in HTML and CSS? I have included a screenshot for reference. I want to display "Max 100, Min 1" just like shown in the image. Here is my code: <input type="text" class="textarea" ...

Is there a way to customize the navbar layout so that link 1 is aligned to the right side, link 2 is centered, and link 3 is positioned on the right?

I attempted to utilize the flex property and justify content, but unfortunately that did not yield the desired result. I experimented with the code provided below. The goal is to create a website layout with a logo at the top and a navigation bar directly ...

Combine various canvases into a single one (for exporting purposes) with pure Javascript

I'm currently faced with a unique challenge involving the creation of around 200 canvases, each showcasing an image captured from the user's webcam as part of an experimentation process for the "photo finish" technique. My task now is to export ...

Is there a way to invoke a function in an iframe from its parent?

How can I call a function that is in an iframe from the parent document? If the function were in the parent, I could simply use parent.func(); but since it's within the iframe, how can I still call it successfully? JavaScript keeps saying it can' ...

Working with the collapse event in Bootstrap

After purchasing a template from ThemeForest, I found it to be absolutely amazing. However, I am struggling with using Bootstrap as it seems quite complex. The left menu is structured with collapsible ul and multiple li elements. I am seeking assistance o ...

Crafting a responsible table design with the help of grid layout techniques

Is there a way to create a table that can adjust its rows and columns based on the container width or when resized? https://i.sstatic.net/xeZjl.png https://i.sstatic.net/kdpJC.png I attempted to use grid-gap in the background, but it resulted in empty red ...

Trigger a keypress event following the activation of a button

I've been trying to simulate the press of the backspace key on the keyboard after clicking a button, but all my attempts have been unsuccessful. Here is the code I'm using: function rtf(){ document.getElementById("u0u").focus(); $('#u0u ...

Populating fields in a new AngularJS document from a table

I have a project where there is a table displaying different instances of our service, and each row has an info button that opens a form with the corresponding row's information autofilled. However, I am facing an issue where by the time I retrieve th ...

Are none of the page links clickable?

Currently, I am in the process of creating a portfolio website. This is my first attempt at coding HTML and CSS from scratch without the aid of a layout template. I've encountered an issue that has me stumped - the links within the container are not ...

Highlighting text in React using hover effects on list elements

Imagine having HTML / JSX structured like this: <ul> <li>First point in list</li> <li>Second point in list</li> </ul> and the goal is to highlight a contiguous range that spans multiple list items: <ul> < ...

406 error is triggered by GET parameters

Here is a PHP script I have: <!DOCTYPE html> <html lang="es-ES" xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-ES"> <head> <meta charset="iso-8859-1" /> </head> <body><p><?php if(isset($_GET['echo& ...

Count characters in multiple text inputs with AngularJS

Currently, I am developing an Angular JS application with the help of Angular-UI (bootstrap). In this app, there are multiple input boxes where users can enter data, which is then displayed in a div. My goal is to have a character count that applies to al ...

I added an onClick event to an SVG image, however, I am struggling to get the event to execute a jQuery if/else statement

I've been working on creating an SVG map of the US, and I'm almost finished. The final step involves implementing a simple if-else statement to prompt users for the name of the state when they click on it. My goal is to fill the state green if th ...

Every time I click the highlight button, my navbar link inexplicably shrinks

I am struggling with adjusting the list style in my bootstrap navbar. Whenever I click on the highlight button, it squeezes my navbar and I'm not sure how to fix it. <div id="links"> <a href="index.html">Home& ...

Making the Bootstrap 4 card-footer expand to occupy the remaining height of the column

I'm currently developing a project that incorporates bootstrap cards. There are 3 cards, each for a different column, and I need them to have equal heights. Here is how they currently look: https://i.sstatic.net/Nau98.png The B and C cards should oc ...

Make changes to external CSS using HTML and JavaScript

Is it possible to dynamically change the value of a background in an external CSS file using JavaScript? Currently, all my pages are connected to a CSS file that controls the background for each page. I am attempting to modify the background by clicking a ...

Utilizing Data Filters to Embed HTML in Vue.js?

I have been attempting to utilize the Filter feature in Vue.js to insert HTML tags within a String. The documentation indicates that this should be achievable, however, I am not having any success. The objective is for the data to be just a String that is ...

Is it possible for the vertical borders of <span> to overlap?

When nesting multiple spans within each other and giving them borders, their horizontal borders overlap by default while their vertical borders stack. Check out a live example on JsFiddle: https://jsfiddle.net/4un9tnxy/ .html: <span><span>a& ...

Incorporating the parent object into a nested JavaScript function

I have come across similar questions, but my situation seems unique to me. I have simplified my code and turned one line into a comment, but the core concept remains unchanged... function myFunction(options) { var button; options.widgets.forEach(f ...

Attach an event listener to the HTML content

Being new to Javascript, I am attempting to add an event listener for each button on every card. However, the code seems to only apply the event 'click' to the last card (button). Is there a way to make this work with the innerHTML of the card? l ...