做项目遇到边框需要设置圆角，然后发现在设置了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等的边框样式。
　　欢迎有更好的方法的网友指正。

关于table边框，设置了border-collapse:collapse之后，设置border-radius没效果的更多相关文章

  1. table边框设置

    一.表格的常用属性基本属性有:width(宽度).height(高度).border(边框值).cellspacing(表格的内宽,即表格与tr之间的间隔). cellpadding(表格内元素的间隔 ...

  2. table边框不显示

    今日在做报表的时候发现,最后一行隐藏后整个报表的下边框会不显示,猜测是td的边框隐藏后但table并未设置边框,导致下边框没有出现.因此设置了table边框后问题解决.table和td的边框关系如下实 ...

  3. table边框1px

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 解决table边框在打印中不显示的问题

    先了解一下,table边框如何设置 一.只对表格table标签设置边框 只对table标签设置border(边框)样式,将让此表格最外层table一个边框,而表格内部不产生边框样式.CSS代码: .t ...

  5. HTML小技巧将table边框改为细线

    HTML制作新手在用TABLE表格时,会碰到如何改变边线粗线,因为默认的TABLE边线设置即使是1px 是很粗的.因此会使用其他一些方法来制作出细线边框,这里介绍一种利用CSS来实现细线的方法,很有效 ...

  6. table 边框

    <table width="100%" border="0" cellpadding="2" cellspacing="0& ...

  7. table 边框问题

    对table设置css样式边框,分为几种情况:1.只对table设置边框2.对td设置边框3.对table和td技巧性设置表格边框4.对table和td设置背景,实现完美表格边框 以下DIVCSS5对 ...

  8. 借助JavaScript中的Dom属性改变Html中Table边框的颜色

    借助JavaScript中的Dom属性改变Html中Table边框的颜色 -------------------- <html> <head> <title>我是页 ...

  9. 借助JavaScript中的时间函数改变Html中Table边框的颜色

    借助JavaScript中的时间函数改变Html中Table边框的颜色 <html> <head> <meta http-equiv="Content-Type ...

随机推荐

  1. 【leetcode 简单】 第六十六题 用栈实现队列

    使用栈实现队列的下列操作: push(x) -- 将一个元素放入队列的尾部. pop() -- 从队列首部移除元素. peek() -- 返回队列首部的元素. empty() -- 返回队列是否为空. ...

  2. python初步学习-练习题

    1.实现1-100的所有的和 #!/usr/bin/env python #encoding:utf8 '''实现1-100的所有的和 1. 使用列表解析获取0-100的列表 2. 使用reduce内 ...

  3. 【技巧总结】Penetration Test Engineer[5]-Operating System Security(SQL Server、MySQL提权)

    4.数据库安全基础 4.1.MSSQL 数据库角色权限 sysadmin:执行SQL Server中的任何动作 db_owner:可以执行数据库中技术所有动作的用户 public:数据库的每个合法用户 ...

  4. Linux下如何在进程中获取虚拟地址对应的物理地址【转】

    转自:http://blog.csdn.net/kongkongkkk/article/details/74366200 如果让你编写一个程序,来获取虚拟地址对应的物理地址..你会试着操作MMU吗.. ...

  5. spin_lock & mutex_lock的区别? 【转】

    转自:http://blog.csdn.net/wilsonboliu/article/details/19190861 本文由该问题引入到内核锁的讨论,归纳如下   为什么需要内核锁? 多核处理器下 ...

  6. Jenkins+Ant+TestNG+Testlink自动化构建集成

    这段时间折腾自动化测试,之前都是在Eclipse工程里面手工执行自动化测试脚本,调用Testlink API执行测试用例,目前搭建Jenkins自动化构建测试的方式,实现持续构建,执行自动化测试. 硬 ...

  7. Mac下破解intellij IDEA 2018

    一.在进入下面网站下载破解补丁 http://idea.lanyus.com/ 二.在“应用程序”中找到已经安装的IntelliJ IDEA,在app上右键,选择“显示包内容”,如下图: 将下载的破解 ...

  8. js实现ctrl+v粘贴图片或是截图

    浏览器环境:谷歌浏览器 1.ctrl+v粘贴图片都是监听paste时间实现的,复制的数据都存在clipboardData下面,虽然打印显示数据长度为0,但是还是可以获取数据的 2.打印clipboar ...

  9. python基础-类的反射

    1)反射是通过字符串方式映射内存中的对象. python中的反射功能是由以下四个内置函数提供:hasattr.getattr.setattr.delattr, 改四个函数分别用于对对象内部执行:检查是 ...

  10. Win10搜索不能用

    使用win10进行搜索时,一直显示win10特色的滚动条,但就是检索不出东西,我的主要是检索不到windows的内容: (个人感觉使用win10检索网页内容不太专业,就关闭了Web搜索) 最后有发现网 ...