Re: `overflow: hidden` on tables for border rounding doesn't seem to be supported by the standard

On Dec 1, 2011, at 8:19 AM, "Tab Atkins Jr." <jackalmage@gmail.com> wrote:

> On Thu, Dec 1, 2011 at 1:54 AM, Yao Wei (κã‘Í¢) <mwei@lxde.org> wrote:
>> I am a student, and an amateur designer and developer. I was using
>> border-radius on table element, and set the background color on table
>> header, but I found that the color on table header overflowed on the
>> corner.
>> Then I used `overflow: hidden` on table, though Webkit-based browsers
>> work well, Gecko-based browsers do not.
>> 
>> I was going to file this ¡°problem¡± on Mozilla, but I am worrying that
>> it could be explained as `overflow: hidden` cannot be used on tables
>> in CSS 2.1. Could the standard support this use case?
>> 
>> The test case is shown below:
>> 
>>  <div style="display:table;border-radius: 50px; overflow: hidden;">
>>    <div style="display:table-row;">
>>      <div style="display:table-cell;background:#f00;width:300px;height:300px;">
>>      </div>
>>    </div>
>>  </div>
> 
> As far as I can tell, 'overflow' is supported on tables just fine.
> This appears to be a Gecko bug.

Overflow is on the border-box, though, so if your table and/or cells have a border it still wouldn't look right. I had this sort of situation before, and edend up putting the border radii on the cells instead of the table, which was a big PIA for writing for different rules with first/last selectors. It would have been better if the border-radius had just automatically propagated to the cells from the table, or to even allow a single border-radius go around more than on cell (a partial curve on one cell's border box, and the continued curve on another's, if the curve is taller or wider than the cell).

Received on Thursday, 1 December 2011 16:39:36 UTC