Question

我正试图在包含各种子元素的表格上获得圆角：http://jsbin.com/seqisa/1/

我可以让阴影背景有圆角，但我做的任何事情似乎都不会影响边界线。我已经阅读了其他几个似乎问这个问题的问题，但是所提供的答案似乎都不适合我。

这就是我现在所得到的。 caption元素表现良好，但thead，tbody或tfoot都不起作用。我试过单独在每个元素上设置border，但没有一个会产生圆角。

Current output

这是html：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <table>
    <tbody>
      <tr><td>Cell 1</td><td>Cell 2</td></tr>
      <tr><td>Cell 1</td><td>Cell 2</td></tr>
    </tbody>
  </table>

  <table>
    <thead>
      <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>Cell 1</td><td>Cell 2</td></tr>
      <tr><td>Cell 1</td><td>Cell 2</td></tr>
    </tbody>
  </table>

  <table>
    <caption>Caption</caption>
    <tbody>
      <tr><td>Cell 1</td><td>Cell 2</td></tr>
      <tr><td>Cell 1</td><td>Cell 2</td></tr>
    </tbody>
  </table>

  <table>
    <caption>Caption</caption>
    <thead>
      <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
      <tr><td>Cell 1</td><td>Cell 2</td></tr>
      <tr><td>Cell 1</td><td>Cell 2</td></tr>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th>Footer 1</th>
        <td>Footer 2</td>
      </tr>
    </tfoot>

  </table>

</body>
</html>

CSS：

/* Basic styling */
table {
  margin-bottom: 15px;
  border-collapse: collapse;
}
caption { background-color: green; }
thead { background-color: blue; }
tbody { background-color: lightgray; }
tfoot { background-color: magenta; }
th, td, caption { padding: 4px; }

/* Radius */
table > :first-child,
table > :first-child > tr:first-child > td:first-child,
table > :first-child > tr:first-child > th:first-child {
  border-top-left-radius: 10px;
}

table > :first-child,
table > :first-child > tr:first-child > td:last-child,
table > :first-child > tr:first-child > th:last-child {
  border-top-right-radius: 10px;
}

table > :last-child,
table > :last-child > tr:last-child > td:first-child,
table > :last-child > tr:last-child > th:first-child {
  border-bottom-left-radius: 10px;
}

table > :last-child,
table > :last-child > tr:last-child > td:last-child,
table > :last-child > tr:last-child > th:last-child {
  border-bottom-right-radius: 10px;
}

/* Borders */

table > * {
  border: 2px solid darkred;
}

Answer 1

尝试使用此 CSS

* { border-collapse: separate; }

由于 W3C.org 规范，

border-radius无法与border-collapse: collapse;一起使用。

Answer 2

为了您自己的目的，请尝试像CSS一样添加以下内容

   table {
     border-image: none;
     border:5px solid red;
     border-top:0 none;
     border-bottom-left-radius: 10px;
     border-bottom-right-radius: 10px;
   }

我采取的结果，虽然我不确定你是否真的要求以下结果..

enter image description here

CSS在表格上舍入边框

2 个答案: