CODEWITHSUNDEEP
htmlcsshtml-tableoverflow
Alex
Alex

Reputation: 329

Overflow:hidden not working in Firefox?

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>

Upvotes: 0

Views: 4972

Answers (5)

Ilya Streltsyn
Ilya Streltsyn

Reputation: 13536

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.

Upvotes: 0

seemly
seemly

Reputation: 1090

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.

Upvotes: 0

Pete Scott
Pete Scott

Reputation: 1526

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

Upvotes: 1

user2568107
user2568107

Reputation:

Add where you want:

-moz-overflow: hidden;

Upvotes: 0

luke
luke

Reputation: 362

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

Upvotes: 0

Related Questions