尝试在桌子上创建圆角，但只有一个边缘

所以我创建了一个包含表类的表，我希望该表具有圆角边缘，但是此代码为我提供了所有舍入的单元格。如何只让桌子变圆？谢谢

   <!DOCTYPE html>
<html>
<head>
<style type="text/css">
table
{
border-collapse:collapse;
}
table, td, th
{
/* This is to have rounded corners */
border:1px solid black;  
/*  change to 1 if border needed */
}
table.margin
{
margin-top:25px;
}
table.margin2
{
margin-top:15px;
border-radius:5px;
-moz-border-radius:5px;
}

您需要从

表中取出圆角代码 td，th，因为这会将圆角代码应用于所有这些元素，但是如果您将其移动到表中 {/* 圆角代码此处 */} 那么它不适用于 TD 和 th。

这段代码在 chrome 上对我有用。

<!DOCTYPE html>
<html>
  <head>
    <style type=text/css>
      .rounded_edges {
        -moz-border-radius: 15px;
        border-radius: 15px;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <table class="rounded_edges">
      <tr>
        <th>Head 1</th>
        <th>Head 2</th>
        <th>Head 3</th>
      </tr>
      <tr>
        <td>Cell 1-1</td>
        <td>Cell 1-2</td>
        <td>Cell 1-3</td>
      </tr>
      <tr>
        <td>Cell 2-1</td>
        <td>Cell 2-2</td>
        <td>Cell 2-3</td>
      </tr>
    </table>
  </body>
</html>

如果您使用的是表格，只需将其放在样式中：

border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;

相关内容

最新更新

热门标签：