Question

所以我创建了一个包含表类的表，我希望表有圆角，但这段代码给了我所有的单元格圆。如何只将表格舍入？谢谢

   <!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;
}

Answer 1

你需要从表格中取出圆角代码，td，因为那会将圆角代码应用于所有这些元素，但是如果你把它移到表格{/ *圆角代码这里* /}然后它不适用于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>

Answer 2

如果您正在使用表格，请将其放在样式中：

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

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

2 个答案: