关于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 ...
随机推荐
- bzoj 5085: 最大——结论题qwq
Description 给你一个n×m的矩形,要你找一个子矩形,价值为左上角左下角右上角右下角这四个数的最小值,要你最大化矩形 的价值. Input 第一行两个数n,m,接下来n行每行m个数,用来描述 ...
- 【蓝桥杯单片机11】单总线温度传感器DS18B20的基本操作
[蓝桥杯单片机11]单总线温度传感器DS18B20的基本操作 广东职业技术学院 欧浩源 单总线数字温度传感器DS18B20几乎成了各类单片机甚至ARM实验板的标配模块来,在蓝桥杯的往届省赛和国赛中,这 ...
- java.lang.IllegalArgumentException: class com.beisheng.maerte.mode.MyCouponVO declares multiple JSON fields named count
原因是:子类和父类有相同的字段属性.解决办法:(1)将父类中的该字段去掉(不要),或者在需要打印的字段上加上注解@Expose (2):由于我报错的类都是在jar包里面,所以第一种方法不好使.只好采用 ...
- Dream------scala--scala内部类实战
Dream------scala--scala内部类实战 scala的内部类跟java的内部类有很大的不同,java中的内部类实际上是从属于外部类,而scala的内部类是从属于外部类对象的(及外部类实 ...
- Strusts2笔记5--数据验证
数据验证: 输入验证分为客户端验证与服务器端验证.客户端验证主要通过JavaScript脚本进行,而服务器端验证主要是通过Java代码进行验证. 分为以下四种情况: (1)手工编写代码,对Action ...
- 10款常见MySQL高可用方案选型解读【转】
我们在考虑MySQL数据库的高可用架构时,主要考虑如下几方面: 如果数据库发生了宕机或者意外中断等故障,能尽快恢复数据库的可用性,尽可能的减少停机时间,保证业务不会因为数据库的故障而中断. 用作备份. ...
- docker安装（2018-03-14版本）
[安装] 说明一: CENTOS或RHEL自带的docker源不一定是最新的,所以必须到docker.com去找到最新的yum源进行安装 说明二: docker的安装方式有两种: 1. 从指定网站获取 ...
- Django 2.0.3安装-压缩包方式
OS:Windows 10家庭中文版,CPU:Intel Core i5-8250U Python版本:Python 2.7,Python 3.6 Django版本:2.0.3(最新2.0.5) 解压 ...
- 利用mysql的binlog恢复数据
MySQL Binary Log也就是常说的bin-log, ,是mysql执行改动产生的二进制日志文件,其主要作用有两个: * 数据回复 * 主从数据库.用于slave端执行增删改,保持与maste ...
- C# Guid 16位 唯一
public static class GuidExtentions { /// <summary> /// 根据GUID获取16位的唯一字符串 /// </summary> ...