0

我有一张圆角的桌子，我在上面放了一个overflow: hiddenCSS 命令，这样各个单元格的角就不会突出。它在 Chrome 上运行良好，但在 Firefox 上不行。有人可以告诉我有什么问题吗？

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

5 回答 5

1

该规范不需要您正在寻找的行为：“'border-radius' 属性确实适用于 'table' 和 'inline-table' 元素。当 'border-collapse' 为 'collapse' 时，UA 可能会应用'table' 和 'inline-table' 元素的边框半径属性，但不是必需的。” （http://dev.w3.org/csswg/css-backgrounds/#border-radius-tables）

它可能根本无法在 Firefox 中运行。如果是这种情况，您可以将边框半径应用于标题单元格（标题行中的：first-child 和 :last-child），但它并不总是正确排列。有点像皮塔饼，我知道。

thead tr th:first-child { border-radius:8px 0 0 0; }
thead tr th:last-child { border-radius:0 8px 0 0; }
于 2013-07-14T20:19:06.460 回答
0

这可能会有所帮助。如何使 CSS3 圆角在 Chrome/Opera 中隐藏溢出

于 2013-07-14T20:14:54.983 回答
0

在你想要的地方添加：

-moz-overflow: hidden;
于 2013-07-14T20:18:16.607 回答
0

可以使用以下技巧更改元素的效果：更改 的overflow，例如，更改为（此值保留表格的收缩配合宽度，并且不应该破坏布局，假设表格被块元素包围）。生成的渲染将等同于表格具有带有and的 div 包装器，它在 Firefox 中渲染没有问题。这是JSbin 示例。tabledisplaytableinline-blockborder-radiusoverflow

于 2013-07-15T00:12:47.843 回答
0

我喜欢皮特斯科特的回答。但是根据您的设计，您可以通过将表格本身包装在具有左右半径的包含元素中来在表格上创建半径效果，溢出隐藏。然后，相对于表格定位，并使用 -*px 来创建所需的视觉效果。但是没有看到预期的最终结果，我无法提供一个例子。

于 2013-07-14T20:24:40.187 回答