做项目遇到边框需要设置圆角，然后发现在设置了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. Linux命令-xargs

    比如一个例子 echo "README.md" |cat echo "README.md" |xargs cat 第一个例子只是输出了README.md的文件名 ...

  2. phpexcel 导入导出excel表格

    phpexcel中文实用手册 转载:http://www.cnblogs.com/freespider/p/3284828.html 下面是总结的几个使用方法 include 'PHPExcel.ph ...

  3. 动态SQL中变量赋值

    在动态SQL语句中进行变量的值绑定比较麻烦,这儿做个记录 declare @COUNT int,@sql nvarchar(max) set @sql = 'select @COUNT = count ...

  4. centos7.2系统没有eth0网卡

    最近一直在学centos7.5系统,偶然看到虚拟机里有7.2系统所以想练习一下(其实7.2和7.5差不多),但是打开虚拟机之后,发现没有eth0网卡 那没有eth0网卡就无法远程连接ssh,既然遇到了 ...

  5. 在使用FastJson开发遇到的的坑

    1.list中放入同一个对象,会出现内存地址引用{"$ref":"#[0]"},后台可以识别,但是前台不会识别 @Test public void testLi ...

  6. DevExpress GridControl 的数据绑定

    本人不才啊,折腾2个多小时才把数据绑定好.现在把折腾过程记录一下来以帮助更多的朋友,自己也温习一下. 直接上代码了哈.... WPF哈 xaml文件 <dxg:GridControl Name= ...

  7. python网络编程-协程（协程说明,greenlet,gevent）

    一:什么是协程 协程(Coroutine):,又称微线程.协程是一种用户态的轻量级线程.是由用户自己控制,CPU根本不知道协程存在. 协程拥有自己的寄存器上下文和栈. 协程调度切换时,将寄存器上下文和 ...

  8. Python列表（list）

    序列是Python中最基本的数据结构.序列中的每个元素都分配一个数字 - 它的位置,或索引,第一个索引是0,第二个索引是1,依此类推. 此外,Python已经内置确定序列的长度以及确定最大和最小的元素 ...

  9. Service(一）：认识service、绑定Service

    Activity是与用户打交道的,而Service是在后台运行的. 这个程序介绍了下如何启动和停止一个Service,以及在后台打印消息,我添加了一些注释. 在activity_main中将布局改为线 ...

  10. ZooKeeper常见问题

    转载自原文:zookeeper(二)常见问题汇总 一.为什么zookeeper要部署基数台服务器? 所谓的zookeeper容错是指,当宕掉几个zookeeper服务器之后,剩下的个数必须大于宕掉的个 ...