只有圆桌angularCSS
我已经search和search，但一直没能find我的要求的解决scheme。
我有一个纯粹的HTML表格。 我想要它的圆angular， 而不使用图像或JS，即纯粹的CSS 。 喜欢这个：
angular落细胞的圆angular和细胞1px厚的边界。
到目前为止，我有这样的：
table { -moz-border-radius: 5px !important; border-collapse: collapse !important; border: none !important; } table th, table td { border: none !important } table th:first-child { -moz-border-radius: 5px 0 0 0 !important; } table th:last-child { -moz-border-radius: 0 5px 0 0 !important; } table tr:last-child td:first-child { -moz-border-radius: 0 0 0 5px !important; } table tr:last-child td:last-child { -moz-border-radius: 0 0 5px 0 !important; } table tr:hover td { background-color: #ddd !important }
但是，这使我没有任何细胞的边界。 如果我添加边框，他们不是圆的！
任何解决scheme
似乎在FF和Chrome（没有testing任何其他）与单独的边界罚款工作： http : //jsfiddle.net/7veZQ/3/
编辑：这是一个相对干净的草图实现：
table { border-collapse:separate; border:solid black 1px; border-radius:6px; -moz-border-radius:6px; } td, th { border-left:solid black 1px; border-top:solid black 1px; } th { background-color: blue; border-top: none; } td:first-child, th:first-child { border-left: none; }
<table> <thead> <tr> <th>blah</th> <th>fwee</th> <th>spoon</th> </tr> </thead> <tr> <td>blah</td> <td>fwee</td> <td>spoon</td> </tr> <tr> <td>blah</td> <td>fwee</td> <td>spoon</td> </tr> </table>
首先，如果你想支持所有的浏览器，你需要的不仅仅是-moz-border-radius 。 您应该指定所有变体，包括简单的border-radius ，如下所示：
-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
其次，为了直接回答你的问题， border-radius实际上并不显示边框; 它只是设置边界的angular落，如果有的话。
要打开边框，从而得到圆angular，还需要在td和th元素上使用border属性。
td, th { border:solid black 1px; }
如果您有背景颜色（或graphics），也会看到圆angular，但当然为了圆angular不带边框，它需要与周围的元素具有不同的背景颜色。
值得注意的是，一些旧版浏览器不喜欢在表格/表格单元上放置border-radius 。 可能值得在每个单元格内放置一个<div>并改为设置样式。 但是，这不应该影响任何浏览器的当前版本（IE除外，根本不支持圆angular）
最后，不是说IE根本不支持border-radius （IE9testing版，但是大多数IE用户将会在IE8以下）。 如果你想破解IE来支持边界，请看http://css3pie.com/
[编辑]
好吧，这是在烦我，所以我做了一些testing。
这里有一个我一直在玩的JSFiddle例子
你错过的重要的事情似乎是border-collapse:separate; 在桌子上。 这将阻止单元格将它们的边界链接在一起，从而允许它们拾取边界半径。
希望有所帮助。
对我来说， Twitter Bootstrap解决scheme看起来不错。 它不包括IE <9（在IE 8和更低版本中没有圆angular），但是没关系，我认为，如果您开发了可能的Web应用程序。
CSS / HTML：
table { border: 1px solid #ddd; border-collapse: separate; border-left: 0; border-radius: 4px; border-spacing: 0px; } thead { display: table-header-group; vertical-align: middle; border-color: inherit; border-collapse: separate; } tr { display: table-row; vertical-align: inherit; border-color: inherit; } th, td { padding: 5px 4px 6px 4px; text-align: left; vertical-align: top; border-left: 1px solid #ddd; } td { border-top: 1px solid #ddd; } thead:first-child tr:first-child th:first-child, tbody:first-child tr:first-child td:first-child { border-radius: 4px 0 0 0; } thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td:first-child { border-radius: 0 0 0 4px; }
<table> <thead> <tr><th>xxx</th><th>xxx</th><th>xxx</th></tr> </thead> <tbody> <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr> <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr> <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr> <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr> <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr> </tbody> </table>
通过个人的需求，我发现用纯CSS对HTML表格单元格进行四舍五入是不可能的。 舍入一个表的最外边框是可能的。
你将不得不诉诸使用本教程中描述的图像，或任何类似的:)
我find了圆angular和其他CSS3行为的最佳解决scheme为IE <9可以在这里find： http : //css3pie.com/
下载插件，复制到解决scheme结构中的目录。 然后在你的样式表中确保有行为标签，以便它插入插件。
我的项目简单的例子，它给了我圆桌，圆angular，颜色渐变和箱子阴影：
.table-canvas { -webkit-border-radius: 8px; -moz-border-radius: 8px; overflow:hidden; border-radius: 10px; -pie-background: linear-gradient(#ece9d8, #E5ECD8); box-shadow: #666 0px 2px 3px; behavior: url(Include/PIE.htc); overflow: hidden; }
如果您的Visual Studio CSS intellisense为您提供未知特性的绿色下划线，请不要担心，它在您运行时仍然有效。 有些元素没有很清楚的logging，但是例子非常好，特别是在头版。
对于有界和可滚动的表，使用这个（replacevariables， $起始文本）
如果你使用thead ， tfoot或者th ，只需要把tr:first-child和tr-last-child和tdreplace成它们。
#table-wrap { border: $border solid $color-border; border-radius: $border-radius; } table { border-collapse: collapse; border-spacing: 0; } table td { border: $border solid $color-border; } table td:first-child { border-left: none; } table td:last-child { border-right: none; } table tr:first-child td { border-top: none; } table tr:last-child td { border-bottom: none; } table tr:first-child td:first-child { border-top-left-radius: $border-radius; } table tr:first-child td:last-child { border-top-right-radius: $border-radius; } table tr:last-child td:first-child { border-bottom-left-radius: $border-radius; } table tr:last-child td:last-child { border-bottom-right-radius: $border-radius; }
HTML：
<div id=table-wrap> <table> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table> </div>
CSS：
table { border: 1px solid black; border-radius: 10px; border-collapse: collapse; overflow: hidden; } td { padding: 0.5em 1em; border: 1px solid black; }
你可以尝试这个，如果你想在桌子两边的圆angular不接触单元格： http : //jsfiddle.net/7veZQ/3983/
<table> <tr class="first-line"><td>A</td><td>B</td></tr> <tr class="last-line"><td>C</td><td>D</td></tr> </table>
示例HTML
<table class="round-corner" aria-describedby="caption"> <caption id="caption">Table with rounded corners</caption> <thead> <tr> <th scope="col">Head1</th> <th scope="col">Head2</th> <th scope="col">Head3</th> </tr> </thead> <tbody> <tr> <td scope="rowgroup">tbody1 row1</td> <td scope="rowgroup">tbody1 row1</td> <td scope="rowgroup">tbody1 row1</td> </tr> <tr> <td scope="rowgroup">tbody1 row2</td> <td scope="rowgroup">tbody1 row2</td> <td scope="rowgroup">tbody1 row2</td> </tr> </tbody> <tbody> <tr> <td scope="rowgroup">tbody2 row1</td> <td scope="rowgroup">tbody2 row1</td> <td scope="rowgroup">tbody2 row1</td> </tr> <tr> <td scope="rowgroup">tbody2 row2</td> <td scope="rowgroup">tbody2 row2</td> <td scope="rowgroup">tbody2 row2</td> </tr> </tbody> <tbody> <tr> <td scope="rowgroup">tbody3 row1</td> <td scope="rowgroup">tbody3 row1</td> <td scope="rowgroup">tbody3 row1</td> </tr> <tr> <td scope="rowgroup">tbody3 row2</td> <td scope="rowgroup">tbody3 row2</td> <td scope="rowgroup">tbody3 row2</td> </tr> </tbody> <tfoot> <tr> <td scope="col">Foot</td> <td scope="col">Foot</td> <td scope="col">Foot</td> </tr> </tfoot> </table>
SCSS，轻松转换为CSS，使用sassmeister.com
// General CSS table, th, td { border: 1px solid #000; padding: 8px 12px; } .round-corner { border-collapse: collapse; border-style: hidden; box-shadow: 0 0 0 1px #000; // fake "border" border-radius: 4px; // Maybe there's no THEAD after the caption? caption + tbody { tr:first-child { td:first-child, th:first-child { border-top-left-radius: 4px; } td:last-child, th:last-child { border-top-right-radius: 4px; border-right: none; } } } tbody:first-child { tr:first-child { td:first-child, th:first-child { border-top-left-radius: 4px; } td:last-child, th:last-child { border-top-right-radius: 4px; border-right: none; } } } tbody:last-child { tr:last-child { td:first-child, th:first-child { border-bottom-left-radius: 4px; } td:last-child, th:last-child { border-bottom-right-radius: 4px; border-right: none; } } } thead { tr:last-child { td:first-child, th:first-child { border-top-left-radius: 4px; } td:last-child, th:last-child { border-top-right-radius: 4px; border-right: none; } } } tfoot { tr:last-child { td:first-child, th:first-child { border-bottom-left-radius: 4px; } td:last-child, th:last-child { border-bottom-right-radius: 4px; border-right: none; } } } // Reset tables inside table table tr th, table tr td { border-radius: 0; } }
以下是我用过的浏览器为我所用的东西，所以我希望它可以帮助未来的人：
#contentblock th:first-child { -moz-border-radius: 6px 0 0 0; -webkit-border-radius: 6px 0 0 0; border-radius: 6px 0 0 0; behavior: url(http://img.dovov.comborder-radius.htc); border-radius: 6px 0 0 0; } #contentblock th:last-child { -moz-border-radius: 0 6px 0 0; -webkit-border-radius: 0 6px 0 0; border-radius: 0 6px 0 0; behavior: url(http://img.dovov.comborder-radius.htc); border-radius: 0 6px 0 0; } #contentblock tr:last-child td:last-child { border-radius: 0 0 6px 0; -moz-border-radius: 0 0 6px 0; -webkit-border-radius: 0 0 6px 0; behavior: url(http://img.dovov.comborder-radius.htc); border-radius: 0 0 6px 0; } #contentblock tr:last-child td:first-child { -moz-border-radius: 0 0 0 6px; -webkit-border-radius: 0 0 0 6px; border-radius: 0 0 0 6px; behavior: url(http://img.dovov.comborder-radius.htc); border-radius: 0 0 0 6px; }
显然，可以根据需要replace/编辑#contentblock部分，并且可以通过在Google或您最喜爱的Web浏览器中进行search来findborder-radius.htc文件。
这是css3 ，只有最近的非IE浏览器会支持它。
看看这里 ，它派生所有可用的浏览器的圆形属性
在<head>标签之间添加：
<style> td {background: #ffddaa; width: 20%;} </style>
并在体内：
<div style="background: black; border-radius: 12px;"> <table width="100%" style="cell-spacing: 1px;"> <tr> <td style="border-top-left-radius: 10px;"> Noordwest </td> <td> </td> <td>Noord</td> <td> </td> <td style="border-top-right-radius: 10px;"> Noordoost </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>West</td> <td> </td> <td>Centrum</td> <td> </td> <td>Oost</td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td style="border-bottom-left-radius: 10px;"> Zuidwest </td> <td> </td> <td>Zuid</td> <td> </td> <td style="border-bottom-right-radius: 10px;"> Zuidoost </td> </tr> </table> </div>
单元格的颜色，内容和格式当然是例如;
它是关于在div中填充填充颜色的单元格。 这样做，黑色单元格边框/表格边框实际上是div背景颜色。
请注意，您需要将div边框半径设置为大于单独单元格边框半径的2个值，才能获得平滑的圆angular效果。
选定的答案是可怕的。 我会实现这个目标的angular落单元格和应用相应的边界半径。
为了得到顶angular，在第一个和最后一个元素types的第一个和最后一个元素上设置边界半径，然后在typestr的最后一个设置tdtypes的最后一个和第一个边界半径以获得底angular。
th:first-of-type { border-top-left-radius: 10px; } th:last-of-type { border-top-right-radius: 10px; } tr:last-of-type td:first-of-type { border-bottom-left-radius: 10px; } tr:last-of-type td:last-of-type { border-bottom-right-radius: 10px; }
在表格周围添加一个<div>包装，并应用下面的CSS
border-radius: x px; overflow: hidden; display: inline-block;
这个包装。
