Overflow:hidden not working in Firefox?

Question

I have a table with rounded corner, and I've put an overflow: hidden CSS command on it so that the corners of the individual cells don't protrude out. It works fine on Chrome, but not on Firefox. Can someone tell me what's wrong?

<style>
table {
        border-spacing: 0px;
        border: 1px solid #222;
        border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;
        overflow: hidden;
}
th {
        height: 30px;
        color: #fff;
        background: #222;
        text-align: left; 
}
tr:nth-child(even) {
    background: #245876;
    color: #fff;
    border: none;
    height: 25px;
}
tr:nth-child(odd) {
    height: 23px;
}
.pos {
        width: 50px;
}
.name {
        width: 175px;
}
</style>

<table>
    <thead>
        <tr>
            <th class="pos"></th>
            <th class="name">Name</th>
            <th class="amount">Amount</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="pos">1</td>
            <td class="name">Bob</td>
            <td class="amount">1324353</td>
        </tr>
        <tr>
            <td class="pos">2</td>
            <td class="name">John</td>
            <td class="amount">10611</td>
        </tr>
        <tr>
            <td class="pos">3</td>
            <td class="name">Bill</td>
            <td class="amount">3270</td>
        </tr>
        <tr>
            <td class="pos">4</td>
            <td class="name">Brian</td>
            <td class="amount">1950</td>
        </tr>
        <tr>
            <td class="pos">5</td>
            <td class="name">Dan</td>
            <td class="amount">1760</td>
        </tr>
    </tbody>
</table>

score 1 · Answer 1 · answered Jul 14 '13 at 20:19

The spec does not require the behavior you are looking for: "The ‘border-radius’ properties do apply to ‘table’ and ‘inline-table’ elements. When ‘border-collapse’ is ‘collapse’, the UA may apply the border-radius properties to ‘table’ and ‘inline-table’ elements, but is not required to." (http://dev.w3.org/csswg/css-backgrounds/#border-radius-tables)

It is possible it simply will not work in Firefox. If that's the case, you could apply border-radius to the header cells (:first-child and :last-child in the header row), but it doesn't always line up properly. A bit of a PITA, I know.

thead tr th:first-child { border-radius:8px 0 0 0; }
thead tr th:last-child { border-radius:0 8px 0 0; }

score 0 · Answer 2 · edited May 23 '17 at 10:25

0

This might help. How to make CSS3 rounded corners hide overflow in Chrome/Opera

edited May 23 '17 at 10:25

Community

1
1

answered Jul 14 '13 at 20:14

luke

342
2
6
16

score 0 · Answer 3 · answered Jul 14 '13 at 20:18

0

Add where you want:

-moz-overflow: hidden;

answered Jul 14 '13 at 20:18

1

This doesn't seem to have any effect in Firefox 22 (Win 7). – Ilya Streltsyn Jul 15 '13 at 00:14

score 0 · Answer 4 · answered Jul 14 '13 at 20:24

I like Pete Scott's answer. But depending on your design, you can create the radius effect on a table by wrapping the table itself in a containing element that has the radius left and right, overflow hidden. Then, position relative the table, and -*px to create the required visual effect. But without seeing the desired end result, I am unable to provide an example.

score 0 · Answer 5 · answered Jul 15 '13 at 00:12

It's possible to change the effect of overflow on the table element with the following trick: change the display of the table, e.g., to inline-block (this value preserves the shrink-fit width of the table and shouldn't break the layout assuming the table is surrounded by block elements). The resulting rendering will be equivalent as if the table has the div wrapper with border-radius and overflow, which renders in Firefox without problems. Here is the JSbin example.

Overflow:hidden not working in Firefox?

5 Answers5