如何仅在表头上创建圆角答案

【问题标题】：How-to create rounded corners on Table Head only如何仅在表头上创建圆角
【发布时间】：2012-04-10 01:31:21
【问题描述】：

我想知道如何只在桌面上创建圆角？

更多细节...我想要一个圆角的桌子，桌子的其余部分是一个矩形，只是第一个标题行应该有圆角。

【问题讨论】：

你自己有没有尝试过？
是的边界半径，但无济于事，它适用于 div，但不适用于表头
thead 元素？ th 元素？表的caption?很多不同的东西都可以称为表头。
之前问过：stackoverflow.com/questions/628301/…
你真的应该更详细地说明你在寻找什么。这有点模棱两可。

标签： css

【解决方案1】：

问题是，你需要使某些内部元素变圆。

所以你必须完成第一轮和最后一轮才能得到想要的解决方案。

table th:first-child{
  border-radius:10px 0 0 10px;
}

table th:last-child{
  border-radius:0 10px 10px 0;
}

【讨论】：

这正是我想要的。
作为后续我如何设置，所以我有一个瘦头。
我有点困惑。当您谈论瘦时，我的头部有高度，为什么要设置宽度？
对不起，我指的是宽度，我将其设置为 20px，但它没有做任何事情......
您也许可以发布您制作的总表的代码或设置小提琴？那会让事情变得更容易。它不占用宽度可能在每个单元格中。

【解决方案2】：

有多种选择。这取决于您真正想要在视觉上实现什么。

但请确保 border-collapse 未设置为折叠，因为这不起作用。有关更多信息，请参阅此 mozilla 链接：https://developer.mozilla.org/en/CSS/border-radius

#uno,
#due th,
#tre th {
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  border: 1px solid black;
}
#tre td {
  border: 1px solid black;
}

<table id="uno" border="0">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
  </tr>
  <tr>
    <td>row 2, cell 1</td>
    <td>row 2, cell 2</td>
  </tr>
</table>

<br>

<table id="due" border="1">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
  </tr>
  <tr>
    <td>row 2, cell 1</td>
    <td>row 2, cell 2</td>
  </tr>
</table>

<br>

<table id="tre" border="0">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
  </tr>
  <tr>
    <td>row 2, cell 1</td>
    <td>row 2, cell 2</td>
  </tr>
</table>

【讨论】：

【解决方案3】：

如果我们看到您的代码或至少是对您不起作用的代码，会更容易为您提供帮助。

无论如何，本教程似乎与您的问题有关http://www.jeox.com/docs/manual/web/round_table_corners.html

编辑：或者这个http://blog.jezmckean.com/css3-rounded-table-corners-no-images/

【讨论】：