Question

我似乎无法让它发挥作用。我正在尝试创建一个圆角和交替行颜色的表。我试图围绕thead元素中的第一个tr和tbody中的最后一个tr的顶部边界。

到目前为止，这是我的CSS：

DB

编辑1：这是HTML。它是一个智能表，一个基于AngularJS的模块。

.table {
    width: 100%;
    border-collapse: collapse;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

    .table td {
        padding: 7px;
        border: #4e95f4 1px solid;
    }
    /* provide some minimal visual accomodation for IE8 and below */
    .table tr {
        background: #b8d1f3;
    }

        .table thead tr:first-child {
            -moz-border-radius-topleft: 5px;
            -moz-border-radius-topright: 5px;
            -webkit-border-top-left-radius: 5px;
            -webkit-border-top-right-radius: 5px;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }
        /*  Define the background color for all the ODD background rows  */
        .table tr:nth-child(odd) {
            background: #b8d1f3;
        }
        /*  Define the background color for all the EVEN background rows  */
        .table tr:nth-child(even) {
            background: #dae5f4;
        }

        .table tbody tr:last-child {
            -moz-border-radius-bottomleft: 5px;
            -moz-border-radius-bottomright: 5px;
            -webkit-border-bottom-left-radius: 5px;
            -webkit-border-bottom-right-radius: 5px;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }

Answer 1

好吧，有几个错误。没有HTML所以我会在这里找一些随机的基本表：

从CSS .table中的表中删除点应为table
移除border-collapse以允许您的表格边框显示border-radius。见下面的代码

现在你有了这个：

<强> HTML

<table>
    <thead>
        <tr>
            <th> title</th>
            <th> title</th>
            <th> title</th>
            <th> title</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td> cell</td>
            <td> cell</td>
            <td> cell</td>
            <td> cell</td>
        </tr>
        <tr>
            <td> cell</td>
            <td> cell</td>
            <td> cell</td>
            <td> cell</td>
        </tr>
        <tr>
            <td> cell</td>
            <td> cell</td>
            <td> cell</td>
            <td> cell</td>
        </tr>
        <tr>
            <td> cell</td>
            <td> cell</td>
            <td> cell</td>
            <td> cell</td>
        </tr>
    </tbody>
</table>

<强> CSS

table {
  width: 100%;
  border-spacing: 0px;
}

table td, table th {
  padding: 7px;
  border: #4e95f4 1px solid;
}

/* provide some minimal visual accomodation for IE8 and below */
table tbody tr {
  background: #b8d1f3;
}
table thead tr{
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px 5px 0 0;
}
table thead tr th:first-child {
  -moz-border-top-left-radius: 5px;
  -webkit-border-top-left-radius: 5px;
  border-top-left-radius: 5px;
}


table thead tr th:last-child {
  -moz-border-top-right-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  border-top-right-radius: 5px;
}

/*  Define the background color for all the ODD background rows  */
table tbody tr:nth-child(odd) {
  background: #b8d1f3;
}

/*  Define the background color for all the EVEN background rows  */
table tbody tr:nth-child(even) {
  background: #dae5f4;
}

table tbody tr:last-child td:last-child {
  -moz-border-bottom-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

table tbody tr:last-child td:first-child {
  -moz-border-bottom-left-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

请参阅DEMO

Answer 2

由于背景仍然越过边界，因此存在一定的问题。我的解决方案如下：

CSS

table#t01 
{
  width: 100%;
  border-collapse: separate;
  border-spacing: 2px;
}

table#t01 thead th {
  background-color:#006400;
  color: white;
  text-align:left;
  padding: 5px;
}

table#t01 tbody td {
  color: black;
  padding: 5px;
}

table#t01 tbody tr td:first-child,
table#t01 thead tr th:first-child {
  border-top-left-radius: 6px !important;
  border-bottom-left-radius: 6px !important;
}

table#t01 tbody tr td:last-child,
table#t01 thead tr th:last-child {
  border-top-right-radius: 6px !important;
  border-bottom-right-radius: 6px !important;
}

table#t01 tbody tr:nth-child(odd) td {
  background-color: #E0EEE0;
}

table#t01 tbody tr:nth-child(even) td {
  background-color: #90EE90;
}

table#t01 tbody tr:hover td {
  background-color: #3D9140;
}

HTML

<table id="t01">
    <thead>
        <tr>
            <th> title</th>
            <th> title</th>
            <th> title</th>
            <th> title</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td> cell</td>
            <td> cell</td>
            <td> cell</td>
            <td> cell</td>
        </tr>
         <tr>
            <td> cell</td>
            <td> cell</td>
            <td> cell</td>
            <td> cell</td>
        </tr>
         <tr>
            <td> cell</td>
            <td> cell</td>
            <td> cell</td>
            <td> cell</td>
        </tr>
        <tr>
            <td> cell</td>
            <td> cell</td>
            <td> cell</td>
            <td> cell</td>
        </tr>
    </tbody>
</table>

我只是将交替的颜色样式添加到奇数行和偶数行的单元格而不是奇数行和偶数行。我稍微改变了配色方案。

Answer 3

sayaksan 提供的答案对我有用。对实际单元格而不是行进行着色似乎可以解决问题。

提供的另一个答案通过使用太浅的背景颜色来隐藏问题，以注意到背景颜色越过边界溢出。

是的，我知道这是一个 5 年前的帖子，但我花了很长时间仍然试图在 2021 年解决这个问题。

表有圆角和交替的颜色

3 个答案: