无法在桌子上获得圆角

Question

我有一个带有丑陋形式的Flash网站（通过表格构建）。 （我需要使用flash，因为我正在使用其中一个模板站点。）

我正在尝试围绕标题（标题区域）的顶角以及与IE一起使用的页脚（提交区域）的底角。

我见过几个网站描述如何圆形文本框（或文本区域），但除了图形通过photoshop之外没有表格。我试过这样做，但它显然高于我的技能水平，因为它不起作用！

我在generateit.net上有一点运气，它提供了一个html片段。但是，它也是为文本框而设计的，我的结果也变得不稳定了。

我会发布我的网页，但我还没有发布它。我可以在模板网站的帐户上看到它。但请相信我。他们不稳定。任何人都可以指向一个网站，可以帮助我使用圆形边缘的桌子（没有图形）的HTML代码？

非常感谢！

Answer 1

因为这个问题是“未答复的 ¹ ”，有一段时间我认为我会扩展我的评论作为答案：

table元素及其有效子元素（thead，tbody，tfoot，tr，th和{{1 }}），大概是由于表的固有性质（虽然我没有提及支持或解释，这个假设）拒绝接受或应用td属性：JS Fiddle demo, tested in Chrome 8.x and Firefox 3.6.x on Ubuntu 10.10。

为了解决这个问题，正如@Pekka建议的那样，可以将表格包裹在border-radius中并将div应用于 以及border-radius防止overflow: hidden;出现在table本身弯曲边界之外的角落。

在我为此设置的演示中，我使用了较重的边框来包含div，以减少弯曲边框与div边框相交的抗锯齿伪影，但显然使用了相同的颜色对于这两个元素。

HTML：

table

的CSS：

<div id="container">
    <table>
        <thead>
            <tr>
                <th colspan="2">Name</th>
                <th rowspan="2">Age</th>
            </tr>
            <tr>
                <th>Family</th>
                <th>First</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td colspan="3">Age information from Wikipedia</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Freeman</td>
                <td>Martin</td>
                <td>39</td>
            </tr>
            <tr>
                <td>Freeman</td>
                <td>Morgan</td>
                <td>73</td>
            </tr>
        </tbody>
    </table>
</div>

JS Fiddle Demo

---

1. 在问题评论中发布的内容（上图）之外。