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

• From: ??? <mwei@lxde.org>
• Date: Thu, 1 Dec 2011 17:54:29 +0800
• To: www-style@w3.org
• Message-ID: <CAJkNRTGRM8ruyZdq1MnxJPQNDXgc=Jm3Dw-Q85yiBn6isFZVhQ@mail.gmail.com>

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>

-- 
Yao Wei

Received on Thursday, 1 December 2011 09:55:43 UTC