Question

我有一个带圆角的桌子，我已经在其上放了一个overflow: hidden CSS命令，这样单个单元格的角落就不会突出。它适用于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>

Answer 1

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

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

thead tr th:first-child { border-radius:8px 0 0 0; }
thead tr th:last-child { border-radius:0 8px 0 0; }

Answer 2

这可能会有所帮助。 How to make CSS3 rounded corners hide overflow in Chrome/Opera

Answer 3

添加到您想要的位置：

-moz-overflow: hidden;

Answer 4

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

Answer 5

可以使用以下技巧更改overflow元素对table元素的影响：更改display的{{1}}，例如更改为table （此值保留表的缩小宽度，并且假设表被块元素包围，则不应破坏布局）。生成的渲染将等同于表具有带有inline-block和border-radius的div包装器，它在Firefox中呈现没有问题。这是JSbin example。

溢出：隐藏在Firefox中不起作用？

5 个答案: