Question

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

其他细节......我想要一个粗糙的表头，表的其余部分是一个矩形，只是第一个标题行应该有圆角。

Answer 1

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

所以你必须为第一轮和最后一轮做出希望的解决方案。

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

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

Answer 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>

Answer 3

如果我们看到您的代码或至少代码不适合您，那么帮助您会更容易。

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

如何在桌面上创建圆角

3 个答案: