解决表圆角CSS [英] Solving table rounded corner CSS

问题描述

我对圆角有以下CSS规则：

I have this CSS rule for rounded corner:

th, td { padding: 8px;
         background: #E8ECE0;
         text-align: center;
         border: 1px solid #444;
         border-bottom-width: 0px;
}
thead { background-color: #446bb3  ; color :#fff; padding:4px; line-height:30px }
tbody tr:nth-child(even) {background: #F6F6EC;}
tbody tr:nth-child(odd) {background: #FFF}

tr:first-child td, tr:first-child th {
    border-top-left-radius: 12px; border-top-right-radius: 12px;
}
tr:last-child td {
    border-bottom: 1px solid #444;
    border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;
}
table { border-spacing: 0; border: 0; margin:0px; width:100%; padding:5px}
td.pd {border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;}
td.pu {border-top-left-radius: 12px; border-top-right-radius: 12px;}

我的html表是：

<table >
    <tbody>
      <tr >
        <td >Hello</td><td >Hello</td>
      </tr>
      <tr >
         <td >Hello</td><td >Hello</td>
      </tr>
      <tr >
         <td >Hello</td><td >Hello</td>
      </tr>
      <tr >
      <td >Hello</td><td >Hello</td>
      </tr>
    </tbody>
  </table>

这给了我

如何解决此问题，表中和表中间的td元素也有圆角吗？我只需要第一行和最后一行具有圆角即可。

How do I fix this problem, as the td elements within the table and in the middle of the table have rounded corners too? I only need the first row and last row to have rounded corners.

推荐答案

假设您的表的html类似于以下内容：

Assuming your table's html resembles the following:

<table>
    <thead>
        <tr>
            <th>First column</th>
            <th>Second column</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row one, cell one</td>
            <td>Row one, cell two</td>
        </tr>
        <tr>
            <td>Row two, cell one</td>
            <td>Row two, cell two</td>
        </tr>
        <tr>
            <td>Row three, cell one</td>
            <td>Row four, cell two</td>
        </tr>
    </tbody>
</table>

以下CSS应该有效：

table {
    border-spacing: 0;
}
th, td {
    border: 1px solid #000;
    padding: 0.5em 1em;
}
/* the first 'th' within the first 'tr' of the 'thead': */
thead tr:first-child th:first-child {
    border-radius: 0.6em 0 0 0;
}
/* the last 'th' within the first 'tr' of the 'thead': */
thead tr:first-child th:last-child {
    border-radius: 0 0.6em 0 0;
}
/* the first 'td' within the last 'tr' of the 'tbody': */
tbody tr:last-child td:first-child {
    border-radius: 0 0 0 0.6em;
}
/* the last 'td' within the last 'tr' of the 'tbody': */
tbody tr:last-child td:last-child {
    border-radius: 0 0 0.6em 0;
}

JS Fiddle演示。

根据OP的问题进行了编辑：

Edited in response to question from OP:

表中的边框有点思考，我如何使其变为1px

the border within the table is a little think, how do i make it 1px

单元格之间的边界有点粗，因为一个单元格的左边界与前一个单元格的右边界相对（顶部/底部边界相同）。

The borders between cells are a little thick, because the left border of one cell is against the right border of the previous cells (and the same for top/bottom borders).

消除这种影响的一种方法是在表元素上指定 border-collapse：折叠; 。不幸的是，这样做的效果是也删除/取消设置/覆盖 border-radius 声明：演示。

One way to remove that effect is to specify border-collapse: collapse; on the table element. Unfortunately the effect of this is to also remove/unset/override the border-radius declarations: demo.

更复杂的方法是手动删除带有上一行，以及紧随其后的一个单元格的左边界，将以下内容添加到上一个CSS：

The more complicated way is to manually remove top-borders for rows with a previous row, and the left-border of a cell that follows a cell, adding the following to the previous CSS:

thead + tbody tr td,
tr + tr td {
    border-top: 0;
}

tr th + th,
tr td + td {
    border-left: 0;
}

JS Fiddle演示。

进行了修改，以减少CSS的耐用性（对于单单元格行，添加 foot 或删除 thead ）：

Edited to reduce make the CSS more durable (for single-cell rows, for the addition of a tfoot or the removal of the thead):

table {
    border-spacing: 0;
}
th, td {
    border: 1px solid #000;
    padding: 0.5em 1em;
}
thead tr:first-child th:first-child,
tbody:first-child tr:first-child td:first-child {
    border-top-left-radius: 0.6em;
}
thead tr:first-child th:last-child,
tbody:first-child tr:first-child td:last-child {
    border-top-right-radius: 0.6em;
}

thead + tbody tr:last-child td:first-child,
tfoot tr:last-child td:first-child {
    border-bottom-left-radius: 0.6em;
}
thead + tbody tr:last-child td:last-child,
tfoot tr:last-child td:last-child {
    border-bottom-right-radius: 0.6em;
}

thead + tbody tr td,
tfoot + tbody tr td,
tfoot tr td,
tbody + tbody tr td,
tr + tr td {
    border-top: 0;
}

tr th + th,
tr td + td {
    border-left: 0;
}

JS Fiddle演示。

多个 body 元素，在没有 tfoot 元素的情况下，当前其中第一个 tbody 将保留边框，半径的下边界。

There is a problem with multiple tbody elements, in the absence of a tfoot element, currently in which the first tbody will retain the border-radius on their lower borders.

这篇关于解决表圆角CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！