在table表格中实现圆角效果

最新推荐文章于 2022-08-10 17:17:30 发布

weixin_30867015

最新推荐文章于 2022-08-10 17:17:30 发布

阅读量2.1k

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/phermis/p/7059894.html

版权

在使用table时遇到border-radius无法显示的问题，由于border-collapse:collapse与border-radius不兼容导致。通过查阅资料，了解了这个问题的原因并实现了设计图中的圆角效果。详细解决方案和参考资料见链接。

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

在table中设置border-radius发现不起作用，网上查找了一番，原因是border-collapse:collapse和border-radius不兼容。

设计图效果

代码实现效果：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #table_wrap > table {
    
            font-size: 16px;
            text-align: center;
            margin: 0 auto;
            border-collapse: separate;
            border-spacing: 0;
            border: 2px #000;
        }

        table thead tr,table tbody tr {
    
            height: 50px;