关于table边框，设置了border-collapse:collapse之后，设置border-radius没效果
做项目遇到边框需要设置圆角，然后发现在设置了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没效果的更多相关文章
- table边框设置
一.表格的常用属性基本属性有:width(宽度).height(高度).border(边框值).cellspacing(表格的内宽,即表格与tr之间的间隔). cellpadding(表格内元素的间隔 ...
- table边框不显示
今日在做报表的时候发现,最后一行隐藏后整个报表的下边框会不显示,猜测是td的边框隐藏后但table并未设置边框,导致下边框没有出现.因此设置了table边框后问题解决.table和td的边框关系如下实 ...
- table边框1px
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 解决table边框在打印中不显示的问题
先了解一下,table边框如何设置 一.只对表格table标签设置边框 只对table标签设置border(边框)样式,将让此表格最外层table一个边框,而表格内部不产生边框样式.CSS代码: .t ...
- HTML小技巧将table边框改为细线
HTML制作新手在用TABLE表格时,会碰到如何改变边线粗线,因为默认的TABLE边线设置即使是1px 是很粗的.因此会使用其他一些方法来制作出细线边框,这里介绍一种利用CSS来实现细线的方法,很有效 ...
- table 边框
<table width="100%" border="0" cellpadding="2" cellspacing="0& ...
- table 边框问题
对table设置css样式边框,分为几种情况:1.只对table设置边框2.对td设置边框3.对table和td技巧性设置表格边框4.对table和td设置背景,实现完美表格边框 以下DIVCSS5对 ...
- 借助JavaScript中的Dom属性改变Html中Table边框的颜色
借助JavaScript中的Dom属性改变Html中Table边框的颜色 -------------------- <html> <head> <title>我是页 ...
- 借助JavaScript中的时间函数改变Html中Table边框的颜色
借助JavaScript中的时间函数改变Html中Table边框的颜色 <html> <head> <meta http-equiv="Content-Type ...
随机推荐
- Cloudera Manager Admin控制台启动不起来
这几天都在搞大数据这一块,由于以前自己在弄hadoop等安装的时候特别的费劲,于是乎找到了广大程序员的福音——cloudera manager,但是第一步安装好了以后无法启动,再三思考+百度发现: 通 ...
- GDB基本用法
基本命令 进入GDB:#gdb test test是要调试的程序,由gcc test.c -g -o test生成.进入后提示符变为(gdb) . 查看源码:(gdb) l 源码会进行行号提示. 如果 ...
- 【CC2530强化实训04】定时器间隔定时实现按键N连击
[CC2530强化实训04]定时器间隔定时实现按键N连击 [题目要求] 2018年全国职业院校技能大赛“物联网技术应用”国赛(高职组)中关于感知层开发的难度陡然增大,三个题目均在Zigbee ...
- 查看Linux系统版本的几种方法
第一种: cat /etc/os-release # 或者 cat /etc/redhat-release 结果如下: NAME="Ubuntu" VERSION="16 ...
- Java编程思想 4th 第1章 对象导论
所有编程语言都提供抽象机制. 面向对象编程似乎是一种很好的编程思想和方式,面向对象编程中的对象简洁描述是:对象具有状态.行为和标识.状态指的是数据存储,存储的数据能反应状态:行为指的是方法,方法表示对 ...
- solr配置中文分词器——（十二）
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAqcAAAGzCAIAAACdKClDAAAgAElEQVR4nOydd5gUxdbGx5xASZKXLB
- Spring4笔记12--SSH整合3--Spring与Struts2整合
SSH 框架整合技术: 3. Spring与Struts2整合(对比SpringWeb): Spring 与 Struts2 整合的目的有两个: (1)在 Struts2 的 Action 中,即 V ...
- 移动端测试===PROC系列之---/proc/pid/stat 如何准确取cpu的值【转】
/proc/ /stat 包含了所有CPU活跃的信息,该文件中的所有值都是从系统启动开始累计到当前时刻. [root@localhost ~]# cat /proc/6873/stat 68 ...
- linux音频alsa-uda134x驱动分析之二（时钟)
Audio Clocking音频时钟============== This text describes the audio clocking terms in ASoC and digital au ...
- 一步一步搭建11gR2 rac+dg之配置单实例的DG(八)【转】
RAC主库配置单实例ActiveDataguard 本文文档结构: 这里配置的过程中需要注意的一项是多看看rac1和rac2以及dg的告警日志会对配置过程有更深刻的理解...配置oracle rac的 ...