在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;

            line-height: 50px;

            /*background-color: pink;*/

        }

        table tr th:first-child,table tr td:first-child {/*设置table左边边框*/

            border-left: 2px solid #eaeaea;

        }

        table tr th:last-child,table tr td:last-child {/*设置table右边边框*/

            border-right: 2px solid #eaeaea;

        }

        table tr td:first-child,

        table tr td:nth-child(2),

        table tr td:nth-child(3),

        table tr td:last-child{/*设置table表格每列底部边框*/

            border-bottom: 2px solid #eaeaea;

        }

        /*table tr:last-child td:first-child,

        table tr:last-child td:nth-child(2),

        table tr:last-child td:nth-child(3),

        table tr:last-child td:last-child{/!*设置table表格最后一列底部边框*!/

            border-bottom: 2px solid #000;

        }*/

        table tr th {

            background: #eaeaea;

        }

        table tr:first-child th:first-child {

            border-top-left-radius: 12px;

        }

        table tr:first-child th:last-child {

            border-top-right-radius: 12px;

        }

        table tr:last-child td:first-child {

            border-bottom-left-radius: 12px;

        }

        table tr:last-child td:last-child {

            border-bottom-right-radius: 12px;

        }

    </style>

</head>

<body>

<div id="table_wrap">

    <table class="table" width="800" cellspacing="0" cellpadding="0">

        <thead class="table_head">

        <tr>

            <th>头部1</th>

            <th>头部2</th>

            <th>头部3</th>

            <th>头部4</th>

        </tr>

        </thead>

        <tbody>

        <tr>

            <td>1内容1</td>

            <td>1内容2</td>

            <td>1内容3</td>

            <td>1内容4</td>

        </tr>

        <tr>

            <td>2内容1</td>

            <td>2内容2</td>

            <td>2内容3</td>

            <td>2内容4</td>

        </tr>

        <tr>

            <td>3内容1</td>

            <td>3内容2</td>

            <td>3内容3</td>

            <td>3内容4</td>

        </tr>

        </tbody>

    </table>

</div>

</body>

</html>

参考资料地址：http://www.cnblogs.com/purl135/p/4918920.html

在table表格中实现圆角效果的更多相关文章

  1. 5种做法实现table表格中的斜线表头效果

    table表格,这个东西大家肯定都不陌生,代码中我们时常都能碰到,那么给table加一个斜线的表头有时是很有必要的,但是到底该怎么实现这种效果呢? 我总结了以下几种方法: 1.最最最简单的做法 直接去 ...

  2. table表格整体居中 和 table表格中各行各列内容居中

    1.table表格整个居中<div style="text-align: center;"> <table border="1" style= ...

  3. 使用js方法将table表格中指定列指定行中相同内容的单元格进行合并操作。

    前言 使用js方法对html中的table表格进行单元格的行列合并操作. 网上执行此操作的实例方法有很多,但根据实际业务的区别,大多不适用. 所以在网上各位大神写的方法的基础上进行了部分修改以适合自己 ...

  4. table表格中的内容溢出布局方式

    什么是内容溢出呢?其实就是当文字很多的时候,如果内容区域只有那么长,那么多出的部分以点点点代替. 这次做的案例是在table里面,我们知道当我们在table里输入过多的文字内容的时候会撑乱表格,例如一 ...

  5. table表格中实现tbody部分可滚动，且thead部分固定

    1.想要实现表格的thead部分固定切tbody部分可滚动,就需要将thead与tbody进行分离,具体做法是 1.设置thead,tbody都为display:block: 2.设置th与td的宽度 ...

  6. table表格中加入<a>标签，使内容上下居中的方法。

    主要思路:定义好表格单元格的width和height,再加入<a>后,设置<a>的width=100%,height=100%填充整个单元格.那么此时设置上下左右居中样式就只需 ...

  7. 在把table表格中的数据导出到Excel的时候，以科学计数法显示位数多的数字时怎么解决？

    sbHtml.AppendFormat("<td> {0}</td>", data[i].IDcard.ToString()); sbHtml.Append ...

  8. table表格中文字超出显示省略号

    第一步: table {table-layout:fixed:}列宽由表格宽度和列宽度设定,不随文字多少变化 第二步: td { white-space:nowrap;/*文本不会换行,文本会在在同一 ...

  9. vue+element-ui：table表格中的slot 、formatter属性

    slot 插槽,table中表示该行内容以自定义方式展示 :formatter 方法,用来格式化内容 Function(row, column, cellValue, index) html < ...

随机推荐

  1. linux终端提示符显示bash-4.2#

    原因是root在/root下面的几个配置文件丢失,丢失文件如下: 1..bash_profile 2..bashrc 以上这些文件是每个用户都必备的文件. 使用以下命令从主默认文件重新拷贝一份配置信息 ...

  2. MAVEN_day03 整合SSH框架

    一.整合SSH工程环境准备 1.创建MAVEN工程>>添加>>"web.xml"文件解决工程红色叹号. new Maven Project>>在 ...

  3. java框架之MyBatis(2)-进阶&整合Spring&逆向工程

    进阶内容 准备 jdbc.url=jdbc:mysql://192.168.208.192:3306/test?characterEncoding=utf-8 jdbc.driver=com.mysq ...

  4. js之prototype 原型对象

    原型对象prototype可以这么理解,是该类的实例对象的模板,每个实例对象都是先复制一份该类的prototype,通过这个可以让类的实例拥有相同的功能   String.prototype.say= ...

  5. C#设计模式(2)——简单工厂模式（转）

    C#设计模式(2)——简单工厂模式   一.引言 这个系列也是自己对设计模式的一些学习笔记,希望对一些初学设计模式的人有所帮助的,在上一个专题中介绍了单例模式,在这个专题中继续为大家介绍一个比较容易理 ...

  6. 与数论的厮守01:素数的测试——Miller Rabin

    看一个数是否为质数,我们通常会用那个O(√N)的算法来做,那个算法叫试除法.然而当这个数非常大的时候,这个高增长率的时间复杂度就不够这个数跑了. 为了解决这个问题,我们先来看看费马小定理:若n为素数, ...

  7. Eclipse出现：An internal error occurred during: "Retrieving archetypes:". GC overhead limit exceeded的问题解决

    网上说修改虚拟内存的方式,其实不太可行,最直接的方式就是删除以前的workspace,重新使用一个新的workspace.

  8. windows----------windows查看端口是否被占用

    假如我们需要确定谁占用了我们的80端口在windows命令行窗口下执行: netstat -aon|findstr "80" TCP 127.0.0.1:80 0.0.0.0:0 ...

  9. 完成登录功能，用session记住用户名

    登录功能完成: js:设置return html:设置 form input py: @app.route设置methods GET POST 读取表单数据 查询数据库 用户名密码对: 记住用户名 跳 ...

  10. 事件冒泡以及onmouseenter 和 onmouseover 的不同

    1. onmouseenter onmouseenter 事件在鼠标指针移动到元素上时触发. 该事件通常与 onmouseleave 事件一同使用, 在鼠标指针移出元素上时触发. onmouseent ...