边框半径不适用于每一行[重复]答案

【问题标题】：Border radius not working for each row [duplicate]边框半径不适用于每一行[重复]
【发布时间】：2014-03-21 05:27:48
【问题描述】：

当我在表格行中设置时，边界半径不起作用。我希望每行的角都是圆角的。

<table style="border-spacing: 0 8px; border-collapse: separate;">
                    <tbody>
                        @foreach (var item in Model.project)
                        {
                            @:<tr style="background-color:grey;-moz-border-radius: 15px;border-radius: 15px;">
                            <td class="position">@item["position"]</td>                                
                            <td class="image">
                                <img src="@item["image"]" />
                            </td>
                            <td class="name">@item["name"]</td>                              
                            @:</tr>
                        }
                    </tbody>
                </table>

【问题讨论】：

标签： html css

【解决方案1】：

我不知道所有带有 @ 的代码是什么，我将其留在代码中并修复了其余部分：

HTML：

<table style="border-spacing: 0 8px; border-collapse: separate;">
    <tbody>
    @foreach (var item in Model.project) {
        @:<tr>
            <td class="position">@item["position"]</td>                                
            <td class="image">
            <img src="@item["image"]" />
            </td>
            <td class="name">@item["name"]</td>                              
        @:</tr>
    }
    </tbody>
</table>

CSS：

tbody > tr td {
    background-color:grey;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

JSFiddle demo

【讨论】：

jsfiddle.net/F6mZL/1 这就是前面没有@的代码的样子。

【解决方案2】：

试试这个 css for table -

table {border-collapse:separate;}
tr:first-child td:first-child {border-top-left-radius:15px;}
tr:first-child td:last-child {border-top-right-radius:15px;}
tr:last-child td:first-child {border-bottom-left-radius:15px}
tr:last-child td:last-child {border-bottom-right-radius:15px;}
td {border:1px solid #000; background-color:#ccc}

【讨论】：