尽管计算了border-radius值，Firefox仍未呈现圆角边框

Question

我试图将桌子左下角的左下角绕14px。我可以为除Firefox之外的所有浏览器执行此操作。

在Firefox中，<td>单元格正在舍入，但其下方的<tr>溢出，我无法以任何方式操纵它的边框，这与其他浏览器不同。尽管如此，<tr>元素的计算值表明border-radius是14px，但它的外观是没有应用border-radius。

HTML

<table role="grid">
<tbody role="rowgroup">
<tr role="row" data-uid="da94159d-dc21-4a3c-88f1-5fde7cb5736c">
<td role="gridcell" class="round-grid-corner"><span>Add Section</span></td>
<td role="gridcell">24/01/2001</td>
</tr>
</tbody>
</table>

CSS

.round-grid-corner{  
-moz-border-bottom-left-radius: 14px; 
-webkit-border-bottom-left-radius: 14px;
  border-bottom-left-radius: 14px; 
}

我尝试了以下内容，但没有发生任何事情。

• 添加background-clip：padding-box;
• 为所有元素添加边框半径
• 添加边框折叠：单独

将<tr>的背景颜色着色不是表格，因为它会切断表格边框。

Answer 1

您必须将舍入应用于表格和TD。这对我在FF工作。

示例：

<强> HTML

\r

<强> CSS：

<table class="zui-table zui-table-rounded">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Height</th>
            <th>Born</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>DeMarcus Cousins</td>
            <td>C</td>
            <td>6'11"</td>
            <td>08-13-1990</td>
            <td>$4,917,000</td>
        </tr>
        <tr>
            <td>Isaiah Thomas</td>
            <td>PG</td>
            <td>5'9"</td>
            <td>02-07-1989</td>
            <td>$473,604</td>
        </tr>
        <tr>
            <td>Ben McLemore</td>
            <td>SG</td>
            <td>6'5"</td>
            <td>02-11-1993</td>
            <td>$2,895,960</td>
        </tr>
        <tr>
            <td>Marcus Thornton</td>
            <td>SG</td>
            <td>6'4"</td>
            <td>05-05-1987</td>
            <td>$7,000,000</td>
        </tr>
        <tr>
            <td>Jason Thompson</td>
            <td>PF</td>
            <td>6'11"</td>
            <td>06-21-1986</td>
            <td>$3,001,000</td>
        </tr>
    </tbody>
</table>

FIDDLE