無法在桌子上弄圓角

Question

我有一個Flash網站，上面有一個丑陋的表格（通過表格構建）。 （我需要使用Flash，因為我正在使用這些模板網站之一。）

我正在嘗試舍入與IE兼容的頁眉（標題區域）的頂部和頁腳（提交區域）的底部。

我見過幾個網站描述如何舍入文本框（或文本區域），但是除了通過Photoshop進行圖形處理外，沒有其他表格。 我已經嘗試過這樣做，但是它顯然超出了我的技能水平，因為它不起作用！

我的generateit.net有點運氣，它提供了一個html代碼段。 但是，它也是為文本框設計的，結果越來越不穩定。

我會發布我的網頁，但尚未發布。 我可以在模板網站上的帳戶中看到它。 不過請相信我。 它們是不穩定的。 誰能指向我一個網站，該網站可以為帶有圓角邊緣（無圖形）的表格的html代碼提供幫助？

非常感謝你！

Answer 1

因為這個問題坐了一段時間，“未回答¹ ”，所以我以為我會擴展我的評論作為答案：

table元素及其有效的子元素（ thead ， tbody ， tfoot ， tr ， th和td ），大概是由於表的固有特性（盡管我沒有引用或解釋該假設）拒絕接受或應用border-radius屬性： JS Fiddle演示，已在Ubuntu 10.10的Chrome 8.x和Firefox 3.6.x中進行了測試 。

為了解決這個問題，因為@Pekka暗示，它可能包住表中一個div和應用border-radius 到 ，隨着overflow: hidden; 以防止table的角出現在div本身的彎曲邊界之外。

在此示例中，我為此使用了一個較重的邊框作為包含div以減少彎曲邊框與table邊框交匯處的抗鋸齒效果，但是顯然，兩個元素使用了相同的顏色。

HTML：

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

CSS：

#container {
    border-radius: 1em;
    border: 2px solid #ccc;
    min-width: 30%;
    display: inline-block;
    overflow: hidden;
}
th, td {
    border: 1px solid #ccc;
    padding: 0.3em 1em;
    font-family: sans-serif;
}

th {
    vertical-align: top;
    font-weight: bold;
}

JS提琴演示 。

---

1. 在問題注釋中張貼的內容之外（上方）。