做项目遇到边框需要设置圆角，然后发现在设置了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. Elasticsearch技术解析与实战（五）Document解析

    1.手动指定document id 一般来说,是从某些其他的系统中,导入一些数据到es时,会采取这种方式,就是使用系统中已有数据的唯一标识,作为es中document的id. PUT /index/t ...

  2. 正则表达式 grep文本查询 sed流处理 应用

    一.正则表达: ^:以什么什么开头,^a:以a字符开头 $:以什么什么结尾,b$:以b字符结尾 *:左边字符0-无穷个 +:左边字符1-无穷个 .:代表单字符 ?:前导字符为零个或1个 {n}:左面字 ...

  3. phpcms数据结构

    v9_admin 管理员表 v9_admin_panel 快捷面板 v9_admin_role 角色表 v9_admin_role_priv 管理员权限表 v9_announce 公告表 v9_att ...

  4. MySQL Sakila样本数据库

    Sakila样本数据库介绍 Sakila样本数据库是MySQL官方提供的一个模拟DVD租赁信息管理的数据库,提供了一个标准模式,可作为书中例子,教程.文章.样品,等等,对学习测试来说是个不错的选择. ...

  5. Shell编程之运算符和环境变量配置文件

    一.shell运算符:    declare命令:         declare    -i 变量名     #声明变量        eg. movie[o]=dzp     #定义数组      ...

  6. exec操作文件描述符

    exec命令可以用来替代当前shell:换句话说,并没有启动子shell.使用这一命令时任何环境都将被清除,并重新启动一个shell. 它的一半形式为: exec command 其中,command ...

  7. php 传递赋值和地址赋值 &

    更多内容推荐微信公众号,欢迎关注: 1.传递赋值 $a = 1; $b = 2; $a = $b; echo $a,$b; //结果为:5 5 2.地址赋值 $a = 1; $b = 2; $a = ...

  8. JS函数的几种用法

    1.正常使用:

  9. 电脑蓝屏提示unexpected store exception的解决方法

    在我们使用电脑的过程中常常会遇到许多问题,对于许多不熟悉电脑的用户常常摸不着头脑,而部分用户在使用电脑时,电脑常常出现蓝屏的情况,并提示你的电脑遇到问题需要重新启动,与此同时,其报告错误代码为“une ...

  10. Pytorch数据变换（Transform）

    实例化数据库的时候,有一个可选的参数可以对数据进行转换,满足大多神经网络的要求输入固定尺寸的图片,因此要对原图进行Rescale或者Crop操作,然后返回的数据需要转换成Tensor如: import ...