Overflow:hidden not working in Firefox? - html

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>

Answer 1

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

Answer 2

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

Answer 3

Add where you want:
-moz-overflow: hidden;

Answer 4

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.

Answer 5

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.