4

我有这个圆角的 CSS 规则：

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 元素也有圆角？我只需要第一行和最后一行有圆角。

4

7 回答 7

9

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

<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 小提琴演示。

针对OP的问题进行了编辑：

表格内的边框有点想，我如何使它成为 1px

单元格之间的边界有点粗，因为一个单元格的左边界与前一个单元格的右边界相对（上/下边界也是如此）。

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

更复杂的方法是手动删除具有前一行的行的上边框，以及单元格后面的单元格的左边框，将以下内容添加到前面的 CSS 中：

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

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

JS 小提琴演示。

编辑减少使 CSS 更耐用（对于单单元格行，用于添加tfoot或删除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 小提琴演示。

多个tbody元素存在问题，在没有元素的情况下tfoot，当前第一个元素tbody将在其下边界上保留边界半径。

于 2013-05-19T13:50:17.187 回答
6

您可以将表格放入div。div 的样式（示例）：

div {
  border-radius: 4px;
  -moz-border-radius: 4px
  -webkit-border-radius: 4px;
  overflow: hidden; /*notice*/
}

所以桌角将被隐藏。

于 2013-08-07T10:37:10.730 回答
4

这个答案不直接回答你的问题，而是一个变体。如果您不希望中间列有圆角，这是一个可能的解决方案：

插图：

在此处输入图像描述

表格行 (tr) 的属性：更新最左侧列的表格数据 (td)：

tbody tr td:first-child
{
    border-radius: 0.6em 0 0 0.6em;
}

表格行 (tr) 的属性：更新第二列的表格数据 (td)：

tbody td:nth-child(2)
{
    border-radius: 0 0.6em 0.6em 0;
}

这是一个示例：JS Fiddle 演示

如果您有多个列（td 或 th），您只需添加如下内容：

tbody td:nth-child(2) /* This is now the middle element out of three */
{
    border-radius: 0 0 0 0;
}
tbody td:nth-child(3) /* This is now the right most column */
{
    boder-radius: 0 0.6em 0.6em 0;
}
于 2014-07-12T11:02:46.710 回答
0

You can reset the border radius of the td element. That should solve it.

于 2013-05-19T13:36:53.707 回答
0

You can give id to the td elements and using the id's of td elements set the border radius to 0px.

于 2013-05-19T13:37:57.467 回答
0

You should try a clear:both; and it will be reset. Also you can try !important because maybe you forget other "inline css rules" in other html codes.

于 2013-05-19T13:39:47.483 回答
0

虽然这是一个旧答案，但我想通过添加我的发现来增强它。除了David Thomas的超级聪明答案之外，我还发现了一个不完全适合的边缘情况：单单元行！例如：

<table>
   <tr><th colspan="3">My header</th></tr>
   <tr><td>row1-cell1</td><td>row1-cell2</td><td>row1-cell3</td></tr>
   <tr><td>row2-cell1</td><td>row2-cell2</td><td>row2-cell3</td></tr>
   <tr><th colspan="3">My footer</th></tr>
</table>

右上角的规则将覆盖左上角的规则（因为它在它之后），而右下角的规则将覆盖左下角的规则（出于相同的原因） . 请参见下面的屏幕截图：

覆盖角

对此的补救措施是下面的 css（我根据需要为各种 table-tr、tbody-tr、thead-tr 组合添加了更多选择器，因此您也可以扩展它以适合您的标记）：

        table td,
        table th{
            border: 1px solid #666;
        }

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

         /* alternating table row colors*/
        tr:nth-child(even)  { background-color:#f6f6f6; }
        tr:nth-child(odd)   { background-color:#ffffff; }

        /* set all corner radii initially to zero */
        th, td {
            border-radius: 0;
        }
        
        /*set only specific radii per corner (don't use the border-radius shorthand)*/
        thead tr:first-child th:first-child, 
        table tr:first-child td:first-child,
        tbody tr:first-child th:first-child {
            border-top-left-radius: 0.6em;
        }
        thead tr:first-child th:last-child, 
        table tr:first-child td:last-child,
        tbody tr:first-child th:last-child {
            border-top-right-radius: 0.6em;
        }
        tbody tr:last-child td:first-child, 
        table tr:last-child td:first-child,
        tbody tr:last-child th:first-child {
            border-bottom-left-radius: 0.6em;
        }
        tbody tr:last-child td:last-child, 
        table tr:last-child td:last-child,
        tbody tr:last-child th:last-child {
            border-bottom-right-radius: 0.6em;
        }

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

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

        /* shade th cells */
        table th {
            background-color: #888;
            color: #FFF;
        }

根据需要，这会产生下面的屏幕截图：

固定角

此解决方案的所有功劳仍归功于David Thomas，尤其是相邻单元格边界技巧！

于 2014-08-05T07:48:27.187 回答