CODEWITHSUNDEEP
htmlcss
Ryan-Neal Mes
Ryan-Neal Mes

Reputation: 6263

overflow: hidden on table causes bottom and right border to dissappear

As the title says my table border is being cut off on my table when using overflow: hidden. Please see code below for example. 

    <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 simplified my example down the the bare minimum. I could lose the border-collapse style which would correct this, but I need that style. My code becomes to messy without it.

As an interim solution I have found that I can hack it using the css below, but I am not a hug fan of 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 appreciate any explanations or better solutions to this. I am really interested to know why it's actually doing this after a days worth of investigation.

Thanks

Upvotes: 5

Views: 7389

Answers (4)

Nilay Mistry
Nilay Mistry

Reputation: 76

Try following 1. give margin to your table 2. User table-layout: fixed 3. set

Upvotes: 0

Ryan-Neal Mes
Ryan-Neal Mes

Reputation: 6263

Thanks to skrivener and some further investigation I have managed to figure this out. See the solution here.

Problem - border collapsing not equal around table border:

.table1 {

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

Solution - must not declare border width in border must do it using 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;
}

Problem:

<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>

Solution:

<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:

"The why of it happening, I think, is that when using the collapsed border model of table borders the browser is trying to split the border in the center. On a one-pixel outside border obviously that's not possible, so the browser is using a full pixel width if top/left, and nothing if bottom/right."

This let me to believe that perhaps if I just set the 4 borders setting border-width manually and added 1px to the right and the bottom, the rounding would work correctly. See the solution and you can update the borders to see it works correctly. Now no matter what you can have equal width outer borders as long as you add 1px to the right and bottom borders.

Thanks again for all the help!

Upvotes: 0

Skrivener
Skrivener

Reputation: 1033

There are two quick solutions:

  1. Use 2px border width.
  2. Use outline instead of border.

Eg:

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 why of it happening, I think, is that when using the collapsed border model of table borders the browser is trying to split the border in the center. On a one-pixel outside border obviously that's not possible, so the browser is using a full pixel width if top/left, and nothing if bottom/right. This behavior might be somewhere in the standards, I didn't look that far. But inside this will correctly fill out the borders without doubling up width, it's just the combination of the outside and overflow:hidden that's presumably cropping the bottom and right, which the browser generates but are technically nudged a half-pixel to the right and thus are 'outside' the region of the element. I hope that makes sense. Outline is not cropped by the overflow - I'm not sure why, I wouldn't have predicted an exception.

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

Another solution might be to apply overflow to td and th instead of table, or check if you really need to set overflow at all.

Upvotes: 6

user2019515
user2019515

Reputation: 4503

What's the point in using border-collapse if there are no borders to collapse? Remove the border-collapse and you'll be fine.

See working example here: http://jsfiddle.net/86xST/

Upvotes: 0

Related Questions