CSS设置table表格圆角边框

最新推荐文章于 2023-07-06 16:36:02 发布

哈der~

最新推荐文章于 2023-07-06 16:36:02 发布

阅读量5.3k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/weixin_49821165/article/details/118896964

版权

本文介绍了如何在CSS中为表格设置圆角边框，当使用border-radius与border-collapse:collapse;冲突时，通过调整单元格边框来实现圆角效果的方法，并提供了实现该效果的源码。

摘要由CSDN通过智能技术生成

有些情况下需要给表格设置圆角，但是border-radius与border-collapse:collapse;会产生冲突，给table设置border-radius并不会生效。
可以通过减少单元格框线的方式来不设置boder-collapse;collapse; 这样就能给表格添加圆角了。

效果如图
在这里插入图片描述
源码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{margin: 0;padding: 0;} 
            table{
                margin: 50px auto; 
				border-spacing: 0;
            }
            table th{
                width: 100px;
                height: 30px;
                line-height: 30px;  
            }
              table td{
                width: 100px;
                height: 30px;
                text-align:center;
                line-height: 30px; 
                border: 1px sol