关于table边框，设置了border-collapse:collapse之后，设置border-radius没效果

最新推荐文章于 2025-06-29 10:33:08 发布

转载最新推荐文章于 2025-06-29 10:33:08 发布 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/chuyanfenfei/p/8034689.html

文章标签：

#javascript #php #ViewUI

本文介绍了一个关于CSS中border-radius与border-collapse属性在表格应用中的冲突问题。当同时使用这两个属性时，圆角效果会失效。文章提供了一个简单示例并提出了解决方案：通过将border-collapse更改为separate来实现圆角效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做项目遇到边框需要设置圆角，然后发现在设置了border-collapse:collapse之后，border-radius:10px不起作用了，发现这个是css本身的问题，两者不能混在一起使用。

代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            padding: 60px;
        }
        table {
            width: 400px;
            height: 200px;
            border: 1px solid #ddd;
            border-collapse: collapse;
        }
        table tr td {
            padding: 20px;
            border: 1px solid #ddd;
        }
        table tr th {
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 10px;
        }

    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>王皓</td>
                <td>男</td>
                <td>28</td>
            </tr>
            <tr>
                <td>2</td>
                <td>王皓</td>
                <td>男</td>
                <td>28</td>
            </tr>
            <tr>
                <td>3</td>
                <td>王皓</td>
                <td>男</td>
                <td>28</td>
            </tr>
            <tr>
                <td>4</td>
                <td>王皓</td>
                <td>男</td>
                <td>28</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

效果图：

解决方法：
　　个人采取了比较笨拙的方法，将border-collapse属性值改为separate，并重新在CSS中写table td等的边框样式。
　　欢迎有更好的方法的网友指正。

转载于:https://www.cnblogs.com/chuyanfenfei/p/8034689.html