桌子上的CSS圆形边框

Question

I am trying to get rounded corners on tables with various child elements as in this bin: http://jsbin.com/seqisa/1/ 我正在尝试在具有各种子元素的表上弄圆角，例如在此bin中： http : //jsbin.com/seqisa/1/

I can get the shaded background to have rounded corners, but nothing I do seems to affect the border line. 我可以使阴影背景具有圆角，但是我所做的一切似乎都不会影响边界线。 I have read several other questions that seem to ask the smae thing, but none of the answers provided seem to work for me. 我已经阅读了其他几个似乎在询问该smae问题的问题，但是所提供的答案似乎都不适合我。

This is what I'm getting at the moment. 这就是我现在得到的。 The caption element behaves fine, but none of the thead , tbody or tfoot work. caption元素表现良好，但是thead ， tbody或tfoot不起作用。 I have tried setting the border on every element individually , but none of them result in rounded corners. 我尝试分别在每个元素上设置border ，但是没有一个会导致圆角。

电流输出

Here is the html: 这是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>

And the CSS: 和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

Try to use this CSS 尝试使用此CSS

* { border-collapse: separate; }

border-radius won't work with border-collapse: collapse; border-radius不适用于border-collapse: collapse; due to W3C.org specifications. 根据W3C.org规范。

Answer 2

Try add below like CSS for your own purpose 尝试为自己的目的像CSS一样添加以下内容

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

the result i took, though i'm not sure if you really asked for below result.. 我取得的结果，但是我不确定您是否真的要求以下结果。

在此处输入图片说明

桌子上的CSS圆形边框

问题描述

2 个解决方案

解决方案1
1 2014-11-12 13:16:03

解决方案2
0 2014-11-12 13:26:56

桌子上的CSS圆形边框

问题描述

2 个解决方案

解决方案1 1 2014-11-12 13:16:03

解决方案2 0 2014-11-12 13:26:56

解决方案1
1 2014-11-12 13:16:03

解决方案2
0 2014-11-12 13:26:56