table标签默认是没有边框的,但是如果我们自己加上边框boder:1px solid black;只有整个表格最外面有边框,那么如何给表格添加样式使得整个表格的tr、td都具有边框呢:

 <style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>

上面代码中最后还加上了CSS3 :nth-child() 选择器对奇、偶行采用不同的背景色,同时也可以采用公式table tr:(2n+1)使用。

表格边框css的更多相关文章

  1. 设置表格边框css样式

    table{ width:70%; text-align:center; border-left:#C8B9AE solid 1px; border-top:#C8B9AE solid 1px; bo ...

  2. [转]CSS如何设置html table表格边框样式

    原文地址:http://www.divcss5.com/wenji/w503.shtml 对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对tabl ...

  3. css中的border-collapse属性如何设置表格边框线?(代码示例)

    css中的border-collapse属性如何设置表格边框线?本篇文章就给大家介绍css中的border-collapse属性是什么? border-collapse属性设置表格边框线的方法.有一定 ...

  4. CSS之表格边框合并、兄弟标签外边距合并、父子标签的外边距合并

    本文内容: 表格边框合并 兄弟标签外边距合并 父子标签的外边距合并 首发日期:2018-05-01 表格边框合并: 发生情况: 当设置了cellpadding="0" cellsp ...

  5. CSS学习笔记(3)--表格边框

    http://www.alixixi.com/web/a/2009082657736.shtml 对于很多初学HTML的人来说,表格<table>是最常用的标签了,但对于表格边框的控制,很 ...

  6. 关于vue 中elementui 的表格边框隐藏

    最近写到一个项目需要实现边框隐藏,网上查找了好多笔记,回答都好含糊不清.为此,记录一下自己的实现方法: 需求: 要将如下表格边框去除                   效果图:           ...

  7. JavaScript变换表格边框颜色

    效果查看:http://hovertree.com/texiao/js/2.htm 代码如下,保存到HTML文件也可以查看效果: <html> <head> <meta ...

  8. HTML表格边框的设置小技巧

    对于很多初学HTML的人来说,表格<table>是最常用的标签了,但对于表格边框的控制,很多初学者却不甚其解. 对于很多初学HTML的人来说,表格<table>是最常用的标签了 ...

  9. (转)HTML表格边框的设置小技巧

    对于很多初学HTML的人来说,表格<table>是最常用的标签了,但对于表格边框的控制,很多初学者却不甚其解. 对于很多初学HTML的人来说,表格<table>是最常用的标签了 ...

随机推荐

  1. 【python】lxml中多个xml采用相同节点时出现的问题

    今天突然发现了一个lxml的坑. 假设我们有一个节点 <id>123</id> 有两个父节点都要用上述节点,则必须把上面的节点写两遍!用同一个会出错! 出错例子: #!/usr ...

  2. 【mysql】Blob类型

    来源:http://qgyang.blog.sohu.com/115847378.html 一般在需要存储较大数据时使用Bolb MySql的Bolb四种类型 MySQL中,BLOB是一个二进制大型对 ...

  3. Split()的简单的用法

    1.Split分割一些简答的字符串事例: string str="aaa|bbb|ccc"; string[] list = str.Split('|'); 这是一个字符的切割,但 ...

  4. PHP如何判断远程图片文件是否存在

    <?php $url = 'http://www.nowamagic.net/images/test.jpg'; if( @fopen( $url, 'r' ) ) { echo 'File E ...

  5. HTML表格

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. HTML简历表格

    效果图 <!DOCTYPE > <html> <head> <meta charset="utf-8" /> </head&g ...

  7. linux初体验

    linux系统和window一样,也是一套独立的操作系统,它只是没有图形化界面而已

  8. NYOJ题目111分数加减法

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAsEAAAKBCAIAAAA5i+FPAAAgAElEQVR4nO3dPXLbugMv7LsJ916Iay ...

  9. 昨天一日和彭讨论post请求数据的问题

    上午写了一个for循环,下午与同学视频才知道没有解决根本问题,接口是url单个的数据请求,而导入的是多个员工的考勤数据也就是要有多个请求同时发出,利用这个做法是有链接超时的情况,所以昨天晚上彭为了导入 ...

  10. .net学习笔记---webconfig的读与写

    System.ConfigurationManager类用于对配置文件的读取.其具有的成员如下: 一.AppSettings AppSetting是最简单的配置节,读写非常简单. 名称 说明 AppS ...