圆桌角仅 CSS
Posted
技术标签:
【中文标题】圆桌角仅 CSS【英文标题】：Rounded table corners CSS only 【发布时间】：2011-06-23 08:42:11 【问题描述】：我已经搜索和搜索，但无法找到满足我要求的解决方案。
我有一个普通的 html 表格。我想要圆角，不使用图像或 JS，即纯 CSS only。像这样：
圆角用于角单元格，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
但这让我的单元格没有任何边界。如果我添加边框，它们就不是圆角的！
有什么解决办法吗？
【问题讨论】：
您是否尝试过使用 moz-border-radius 为 TD 元素添加边框？另外，请注意，这在 IE 中不起作用，IE 仍会显示直边。 看着答案和你的 cmets，不清楚你想要什么：你想要圆角在哪里？表格，表格单元格，只有表格角落的单元格？ 我想这从问题标题中很明显，table corners @VishalShah +1 提出了一个非常有用的问题。我盲目地使用为 UI 小部件设计的 jQuery UI 圆角类，但我将它应用到表格元素并且一切都变成了方形。所以现在我仍然可以将我的 jQuery UI 主题与基于表格的小部件一起使用。 【参考方案1】：2020+解决方案
-
使用 CSS 变量将表格的边框半径传递给角单元格的边框半径，这样您就可以在单个位置更改半径（如
<table class="rounded" style="--radius: 10px">）
border-collapse 删除边框半径设置，没有它边框宽度加倍。为了使边框宽 1 像素，我建议使用单元格的框阴影（例如 box-shadow: -1px -1px black）
/* rounded corners */
.rounded
--radius: 5px;
--border-color: black;
border: 1px solid var(--border-color);
border-radius: var(--radius);
border-spacing: 0;
.rounded tr:first-child>:first-child border-top-left-radius: var(--radius);
.rounded tr:first-child>:last-child border-top-right-radius: var(--radius);
.rounded tr:last-child>:first-child border-bottom-left-radius: var(--radius);
.rounded tr:last-child>:last-child border-bottom-right-radius: var(--radius);
/* design */
.rounded th, .rounded td
padding: .2rem;
/* border: 1px solid var(--border-color); */
box-shadow: -1px -1px var(--border-color);
.rounded th
background: hsl(240deg, 100%, 80%);
<table class="rounded">
<tr>
<th>Name
<th>Note
<tr>
<td>Bill Gates
<td>Plagiator
<tr>
<td>Steve Jobs
<td>Hipster
</table>【讨论】：
【参考方案2】：另一种解决方案是对表格使用包装器
http://jsfiddle.net/0fmweahc/15/
<div class="table-wrapper">
<table>
<tr class="first-line"><td>A</td><td>B</td></tr>
<tr class="last-line"><td>C</td><td>D</td></tr>
</table>
</div>
<style>
.table-wrapper
border: 1px solid black;
border-radius: 20px;
margin: 10%;
table, td, th
border: 1px solid black;
padding: 10px;
table
width: 100%;
border-collapse: collapse;
border-style: hidden;
</style>
【讨论】：
【参考方案3】：似乎在具有单独边框的 FF 和 Chrome 中运行良好（尚未测试任何其他）：http://jsfiddle.net/7veZQ/3/
编辑：这是你的草图的一个相对干净的实现：
table
border-collapse:separate;
border:solid black 1px;
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>http://jsfiddle.net/MuZzz/3577/
【讨论】：
不正是我要找的。如果您删除表格填充并将边框半径仅应用于角落单元格，您会得到 2px 厚的边框，这很难看。而是完全没有边界。 关闭。角单元也需要边界半径。 jsfiddle.net/JWb4T/1 虽然现在你看到角落单元的边缘和桌子边缘之间有一个微小的间隙。可以通过减小角单元的边界半径来修复。谢谢：D 很高兴你把它整理好了。请注意，first-child 和 last-child 在 IE6/7/8 中不起作用，但对您来说问题不大，因为 border-radius 也不是。这确实意味着您将无法在 IE 中使用 CSS3Pie 来修复它——它会修复边框半径，但不会修复第一个/最后一个孩子。
将 border-collapse: separate; 添加到 Zurb Ink 模板为我解决了这个问题。
也许这在 7 年前看起来不错，但今天使用此解决方案无法连接单元格边界，因此看起来很糟糕。【参考方案4】：
由于没有一个评分较高的解决方案对我有用，因为我正在使用具有交替配色方案的桌子，我尝试了很多，最后根据@[luke floornoy] 提供的解决方案得到了我的解决方案。
基本上，在表格上放置圆形边框的解决方案有效 - 但是当您在表格行上应用背景颜色或使用指定的表格头时，它会覆盖整个表格设置并显示为矩形。
Luke 的解决方案仅针对特定的角落单元格，这让我想到了我应该也将交替背景颜色应用于该行的单元格而不是该行本身。将 td 添加到 tr:nth-child 就可以了。如果您想在表头上使用第三种颜色，也是如此。您可以在下面的代码 sn-p 中查看这一点。
我没有看到任何其他实际使用背景颜色的解决方案，尤其是在一张桌子上没有使用不同颜色的解决方案，所以我希望这个解决方案可以帮助那些需要不仅仅是一张普通的单色桌子的人。如果它对您有帮助，请给它评分，所以它会移到顶部。这里有很多非常挑剔且不太有用的答案，所以。
这是我的结果https://i.stack.imgur.com/XHOEN.png
这是它的代码：
.LezzonPrize
text-align: center;
line-height: 1.8rem;
border-collapse: collapse;
border-radius: 36px;
-moz-border-radius: 36px;
-webkit-border-radius: 36px;
background-color: #FCF3C6;
.LezzonPrize thead th
background-color:#FFCF5A;
.LezzonPrize thead th:first-child
border-radius: 36px 0 0 0;
.LezzonPrize thead th:last-child
border-radius: 0 36px 0 0;
.LezzonPrize th
text-align: center;
vertical-align: middle;
line-height: 1.8rem;
font-weight: 700;
text-transform: none;
border-bottom:
2px solid #3F5A1B;
.LezzonPrize td:first-child
text-align:left;
.LezzonPrize td
font-size:18px;
.LezzonPrize tr:nth-child(2n-1) td
background-color: #F3CF87;
.LezzonPrize tr:last-child td:first-child
border-radius: 0 0 0 36px;
-moz-border-radius: 0 0 0 36px;
-webkit-border-radius: 0 0 0 36px;
.LezzonPrize tr:last-child td:last-child
border-radius: 0 0 36px 0;
-moz-border-radius: 0 0 36px 0;
-webkit-border-radius: 0 0 36px 0;
<table class="LezzonPrize" >
<thead>
<tr>
<th >
Head
</th>
<th >
Head
</th>
<th >
Head
</th>
<th >
Head
</th>
<th >
Head
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Content
</td>
<td>
Content
</td>
<td>
Content
</td>
<td>
Content
</td>
<td>
Content
</td>
</tr>
<tr>
<td>
Content
</td>
<td>
Content
</td>
<td>
Content
</td>
<td>
Content
</td>
<td>
Content
</td>
</tr>
<tr>
<td>
Content
</td>
<td>
Content
</td>
<td>
Content
</td>
<td>
Content
</td>
<td>
Content
</td>
</tr>
<tr>
<td colspan="5">Try deleting this to confirm that the round corners also work on the 2nth-child table rows</td>
</tr>
</tbody>
</table>【讨论】：
【参考方案5】：为了适应 @luke floornoy 的精彩回答 - 如果您没有在表格中使用 th，以下是制作圆桌所需的所有 CSS：
.my_table
border-collapse: separate;
border-spacing: 0;
border: 1px solid grey;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
.my_table tr:first-of-type
border-top-left-radius: 10px;
.my_table tr:first-of-type td:last-of-type
border-top-right-radius: 10px;
.my_table tr:last-of-type td:first-of-type
border-bottom-left-radius: 10px;
.my_table tr:last-of-type td:last-of-type
border-bottom-right-radius: 10px;
【讨论】：
【参考方案6】：这有点粗糙，但这是我整理的完全由 CSS 和 HTML 组成的东西。
外圆角 标题行 多个数据行这个例子还为每个数据单元<td> 使用了:hover 伪类。可以轻松更新元素以满足您的需求，并且可以快速禁用悬停。
（但是，我还没有让:hover 正确地为整行工作<tr>。最后悬停的行没有显示底部的圆角。我确信有一些简单的东西正在得到忽略。）
table.dltrc
width: 95%;
border-collapse: separate;
border-spacing: 0px;
border: solid black 2px;
border-radius: 8px;
tr.dlheader
text-align: center;
font-weight: bold;
border-left: solid black 1px;
padding: 2px
td.dlheader
background: #d9d9d9;
text-align: center;
font-weight: bold;
border-left: solid black 1px;
border-radius: 0px;
padding: 2px
tr.dlinfo,
td.dlinfo
text-align: center;
border-left: solid black 1px;
border-top: solid black 1px;
padding: 2px
td.dlinfo:first-child,
td.dlheader:first-child
border-left: none;
td.dlheader:first-child
border-radius: 5px 0 0 0;
td.dlheader:last-child
border-radius: 0 5px 0 0;
/*===== hover effects =====*/
/*tr.hover01:hover,
tr.hover02:hover
background-color: #dde6ee;
*/
/* === ROW HOVER === */
/*tr.hover02:hover:last-child
background-color: #dde6ee;
border-radius: 0 0 6px 6px;
*/
/* === CELL HOVER === */
td.hover01:hover
background-color: #dde6ee;
td.hover02:hover
background-color: #dde6ee;
td.hover02:first-child
border-radius: 0 0 0 6px;
td.hover02:last-child
border-radius: 0 0 6px 0;
<body style="background:white">
<br>
<center>
<table class="dltrc" style="background:none">
<tbody>
<tr class="dlheader">
<td class="dlheader">Subject</td>
<td class="dlheader">Title</td>
<td class="dlheader">Format</td>
</tr>
<tr class="dlinfo hover01">
<td class="dlinfo hover01">One</td>
<td class="dlinfo hover01">Two</td>
<td class="dlinfo hover01">Three</td>
</tr>
<tr class="dlinfo hover01">
<td class="dlinfo hover01">Four</td>
<td class="dlinfo hover01">Five</td>
<td class="dlinfo hover01">Six</td>
</tr>
<tr class="dlinfo hover01">
<td class="dlinfo hover01">Seven</td>
<td class="dlinfo hover01">Eight</td>
<td class="dlinfo hover01">Nine</td>
</tr>
<tr class="dlinfo2 hover02">
<td class="dlinfo hover02">Ten</td>
<td class="dlinfo hover01">Eleven</td>
<td class="dlinfo hover02">Twelve</td>
</tr>
</tbody>
</table>
</center>
</body>【讨论】：
这应该是批准的答案。谢谢！【参考方案7】：表格边框课程...
注意：下面的 HTML/CSS 代码只能在 IE 中查看。代码将无法在 Chrome 中正确呈现！
我们需要记住：
表格有一个边框：它的外边界（也可以有一个边框半径。）
单元格本身也有边框（也可以有边框半径。）
表格和单元格的边框会相互干扰：
单元格边框可以穿透表格边框（即：表格边界）。
要看到这个效果，修改下面代码中的CSS样式规则如下： 一世。表 border-collapse: 分开; ii.删除表格角落单元格的样式规则。 iii.然后使用border-spacing，这样您就可以看到干扰。
但是，表格边框和单元格边框可以折叠（使用：border-collapse:collapse;）。
当它们被折叠时，单元格和表格边框会以不同的方式相互干扰：
我。如果表格边框是圆形的，但单元格边框保持方形，则单元格的形状优先，表格将失去其弧形角。
二。相反，如果角单元是弯曲的但表格边界是方形的，那么您将看到一个丑陋的方形角与角单元的曲率接壤。
鉴于单元格的属性优先，那么圆桌四个角的方法是：
我。折叠表格上的边框（使用：border-collapse:collapse;）。
二。在表格的角单元格上设置所需的曲率。 iii.桌子的角是否圆角并不重要（即：它的边框半径可以为零）。
.zui-table-rounded
border: 2px solid blue;
/*border-radius: 20px;*/
border-collapse: collapse;
border-spacing: 0px;
.zui-table-rounded thead th:first-child
border-radius: 30px 0 0 0;
.zui-table-rounded thead th:last-child
border-radius: 0 10px 0 0;
.zui-table-rounded tbody tr:last-child td:first-child
border-radius: 0 0 0 10px;
.zui-table-rounded tbody tr:last-child td:last-child
border-radius: 0 0 10px 0;
.zui-table-rounded thead th
background-color: #CFAD70;
.zui-table-rounded tbody td
border-top: solid 1px #957030;
background-color: #EED592;
<table class="zui-table-rounded">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Height</th>
<th>Born</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>DeMarcus Cousins</td>
<td>C</td>
<td>6'11"</td>
<td>08-13-1990</td>
<td>$4,917,000</td>
</tr>
<tr>
<td>Isaiah Thomas</td>
<td>PG</td>
<td>5'9"</td>
<td>02-07-1989</td>
<td>$473,604</td>
</tr>
<tr>
<td>Ben McLemore</td>
<td>SG</td>
<td>6'5"</td>
<td>02-11-1993</td>
<td>$2,895,960</td>
</tr>
<tr>
<td>Marcus Thornton</td>
<td>SG</td>
<td>6'4"</td>
<td>05-05-1987</td>
<td>$7,000,000</td>
</tr>
<tr>
<td>Jason Thompson</td>
<td>PF</td>
<td>6'11"</td>
<td>06-21-1986</td>
<td>$3,001,000</td>
</tr>
</tbody>
</table>【讨论】：
【参考方案8】：选择的答案很糟糕。我将通过定位角表单元格并应用相应的边框半径来实现这一点。
要获得顶角，请在第 th 元素的第一个和最后一个类型上设置边框半径，然后在 td 在类型 tr 的最后输入以获取底角。
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;
【讨论】：
这比所有其他答案都好得多......这非常简单和优雅！ 很高兴能帮上忙！ 这很好用，但我有另一个表格，表格的顶部和左侧有th 元素，这不起作用。我该如何去圆那种类型的桌子的角落？
这必须是最佳答案。最佳答案不起作用！这个答案也是正确的方式。谢谢卢克！
这是完美的简单工作解决方案。【参考方案9】：
在<head>标签之间添加：
<style>
td background: #ffddaa; width: 20%;
</style>
在体内：
<div style="background: black; border-radius: 12px;">
<table 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-border-radius 设置为比单独的单元格角边框半径大 2 个值，以获取平滑的圆角效果。
【讨论】：
【参考方案10】：我为圆角和 IEhttp://css3pie.com/
下载插件，复制到您的解决方案结构中的目录。然后在你的样式表中确保有行为标签，以便它拉入插件。
我的项目中的简单示例，它为我的表格提供了圆角、颜色渐变和框阴影：
.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 智能感知为您提供未知属性的绿色下划线，请不要担心，它在您运行时仍然有效。有些元素没有很清楚地记录下来，但是示例非常好，尤其是在首页上。
【讨论】：
css 行为属性是对 CSS 的非标准 MS 扩展，它是 removed from IE10+ - 即这在现代浏览器中不起作用【参考方案11】：以下是我使用的跨浏览器对我有用的东西，所以我希望它对未来的人有所帮助：
#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(/images/border-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(/images/border-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(/images/border-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(/images/border-radius.htc);
border-radius: 0 0 0 6px;
显然，#contentblock 部分可以根据需要替换/编辑，您可以通过在 Google 或您喜欢的网络浏览器中进行搜索来找到 border-radius.htc 文件。
【讨论】：
【参考方案12】：对我来说，Twitter Bootstrap Solution 看起来不错。它不包括 IE
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>你可以玩那个here (on jsFiddle)
【讨论】：
【参考方案13】：在表格周围添加 <div> 包装器，并应用以下 CSS
border-radius: x px;
overflow: hidden;
display: inline-block;
到这个包装器。
【讨论】：
【参考方案14】：示例 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;
http://jsfiddle.net/MuTLY/xqrgo466/
【讨论】：
【参考方案15】：如果您希望表格两边的圆角不接触单元格，您可以试试这个：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>
【讨论】：
【参考方案16】：CSS：
table
border: 1px solid black;
border-radius: 10px;
border-collapse: collapse;
overflow: hidden;
td
padding: 0.5em 1em;
border: 1px solid black;
【讨论】：
请详细说明您的解决方案 @SrivatsShankar 我很久以前写过这个，所以从这个-1来看，我想它不再起作用了。我的意思是在 的外边框。我猜你可以尝试将“border-radius”、“border”和“overflow: hidden”添加到
|
对于有边框和可滚动的表格，使用这个（替换变量，$ 起始文本）
如果您使用thead、tfoot 或th，只需将tr:first-child 和tr-last-child 和td 替换为它们即可。
#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>
【讨论】：
【参考方案18】：首先，如果您想支持所有浏览器，您需要的不仅仅是-moz-border-radius。您应该指定所有变体，包括普通的border-radius，如下所示：
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
其次，直接回答您的问题，border-radius 实际上并没有显示边框；它只是设置边角的外观（如果有的话）。
要打开边框，从而获得圆角，还需要 td 和 th 元素上的 border 属性。
td, th
border:solid black 1px;
如果你有背景颜色（或图形），你也会看到圆角，当然它需要与周围元素不同的背景颜色才能使圆角在没有边框的情况下可见。
值得注意的是，一些较旧的浏览器不喜欢将border-radius 放在表格/表格单元格上。可能值得在每个单元格中放置一个<div> 并对其进行样式设置。但是，这不应该影响任何浏览器的当前版本（IE 除外，它根本不支持圆角 - 见下文）
最后，并不是说 IE 根本不支持border-radius（IE9 beta 支持，但大多数 IE 用户将使用 IE8 或更低版本）。如果你想破解 IE 以支持边框半径，请查看http://css3pie.com/
[编辑]
好的，这让我很烦，所以我做了一些测试。
Here's a JSFiddle example I've been playing with
似乎您缺少的关键内容是表格元素上的border-collapse:separate;。这会阻止单元格将它们的边界链接在一起，从而使它们能够拾取边界半径。
希望对您有所帮助。
【讨论】：
为了尽量减少代码，我省略了跨浏览器的内容。如果我给 td 和 th 一个边框，它们就不是圆角的。我得到直边。可以为没有应用 css 的表格提供示例 css 代码，这将证明你在说什么。 @Vishal Shah - 我在做了一些测试后更新了我的答案。希望对您有所帮助。 您的示例显示了 ALL 单元格的边框半径，而我只希望它用于角单元格。这就是我要找的东西：jsfiddle.net/JWb4T/1 @Vishal Shah - 我理解问题是表格上任何地方都没有四舍五入，而不是具体应该对表格的哪些位进行四舍五入。很高兴您最终将其排序（看起来border-collapse:separate; 提示最终很有用）
+1 表示边框折叠：单独的提示。这对我很有帮助。【参考方案19】：
通过个人经验，我发现不可能使用纯 CSS 对 HTML 表格 cell 进行圆角处理。可以对表格的最外层边框进行四舍五入。
您将不得不使用this tutorial 中描述的图像，或任何类似的方法:)
【讨论】：
+1，和这里一样，最近试图实现这一点，但没有运气。必须放入<div>。 ^^,以上是关于圆桌角仅 CSS的主要内容，如果未能解决你的问题，请参考以下文章