在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. 内购审核被拒-[environment-sandbox]

    内购审核被拒-[environment-sandbox] 先把新创建的项目提交审核通过后再提交主包 注意,新增加的内购项目要截图告诉苹果

  2. Python_环境部署及报错汇总（0）

    一.安装Anaconda Anaconda是一个开源的包.环境管理器,可以用于在同一个机器上安装不同版本的软件包及其依赖,并能够在不同的环境之间切换. Anaconda包括Conda.Python以及 ...

  3. SyntaxError:unexpected EOF while parsing(<string,line 0>)

    在python+Django中出现报错:(上图) 经断点发现:python内置函数eval在处理空字符串时会返回EOF错误,判断后解决

  4. 4、 LwIP协议栈规范翻译——流程模型

    4.流程模型 协议实现的流程模型描述了系统被划分为不同的流程的方式.用于实现通信协议的一个流程模型是让每个协议作为一个独立的进程运行.有了这个模型,严格的协议分层被强制执行,并且协议之间的通信点必须严 ...

  5. emqtt日志、证书、集群状态等位置

    1.日志 进入pod后,cd /var/log/emqttd/ 可以看到四种日志 2.证书等位置 cd /etc/emqttd 3.集群状态查询位置 任意位置 emqttd_ctl cluster s ...

  6. MySQL AUTO_INCREMENT 学习总结

    之前有碰到过开发同事指出一张InnoDB表的自增列 AUTO_INCREMENT 值莫明的变大,由于这张表是通过mysqldump导出导入的. 问题排查: 1.首先,查看表表义的sql部分的 auto ...

  7. TensorFlow（1）注解入门代码

    学习当然要从官方的入门文档开始. 但是这篇入门对于从0开始的初学者似乎有些困难,尤其是对于神经网络知识还是一知半解的. 敲完理解一遍还是懵逼. TensorFlow经典入门代码学习备注如下. impo ...

  8. bootstrap-wysiwyg这个坑

    但是用wysiwyg也是费了我不少的精力,特别是在图片上传上,下面做一些总结. 1.引入文件 wysiwyg号称只有5kb,但是实际上是将其他的依赖文件在cdn上用外链链接进来了,有以下几个文件: c ...

  9. jQuery属性attr

    设置多个属性/值对 为被选元素设置一个以上的属性和值. 语法 $(selector).attr({attribute:value, attribute:value ...})比如:$("im ...

  10. 怎样从外网访问内网Sysbase数据库

    外网访问内网Sysbase数据库 本地安装了Sysbase数据库,只能在局域网内访问,怎样从外网也能访问本地Sysbase数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Sys ...