html表格圆角边框

如何让HTML表格中的行显示圆角效果？

上周，一位顾客问我如何将桌子的角弄圆。
他只是扔掉了代码。
后来我想了想才告诉你的。

如果直接在标签上添加半径边框是完全没有用的，因为表格行根本无法被识别。
2 01 3 年我在上海做一个项目，测试了这个方法。
他独自忽略了牧场。
基本系统是表格渲染机制。
只是一个容器，不参与边框字符串的提取。

因此，目的是正确移动细胞。
试试这个：
CSS .rounded-row td { 边框半径：1 0px； 边框：1 px实线cc； }
关键是改变表的属性。
请记住将折叠术语设置为分隔。
合并末端并去除圆角的塌陷缺陷。
我在北京公司的技术社区会议上演示了这一点。
如果不分开放置的话，左上角和右下角的圆角是连在一起的，这是最难看的。

CSS 表{ 边界折叠：分开； 边框间距：0； }
如果你想环绕一行的开头或结尾，你可以这样做：
css .圆顶 td { 左上边框半径：1 0px； 右上边框半径：1 0px； }
.-底部 td { 左边框半径：1 0px； 右下边框半径：1 0px； }
之前在杭州调试过，发现很多行圆角是冲突的。
例如，如果所有三行都是全圆角，则中间行的上下圆角重叠。
解决方案是改变交替行的背景颜色或使用overflow:hidden来推回单元格内容：
css tr，男孩，除非（也）{td .rounded-row 背景颜色：； }
.rotundo-row td { 脱落：隐藏； }
注意兼容性。
IE8 及以下版本根本不支持边缘半径，因为它是旧浏览器。
在这种情况下只能使用图像或 JS。
请注意，例如，默认地图失败模式应明确设置为折叠回合。

我会为您保存代码。
我上次将其发送给客户是：

<头> <风格> 表{ 边界折叠：分开； 边框间距：0； 宽度：1 00%； } .rounded-row td { 边框：1 px实心ddd； 边框半径：1 5 px； 内边距：1 2 px； 背景颜色：f9 f9 f9 ； } .rounded-row-top td { 左上边框半径：1 5 px； 右上边框半径：1 5 px； } .rounded-row 底部 td { 左边框半径：1 5 px； 右下边框半径：1 5 px； } </风格> </头> <正文> <表> 第一行单元格 1 第一行单元格 2 中行单元格1 中线细胞2 下一行单元格 1 下一行单元格 2 </表> </正文> </>
简而言之，单元格是圆形的，桌子是分开的。
如果您没有看到它，请直接使用此代码，或者用