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. September 6th 2016 Week 37th Tuesday

    I only wish to face the sea, with spring flowers blossoming. 我只愿面朝大海,春暖花开. That scenery is beautiful ...

  2. function与感叹号

    原文链接:https://swordair.com/function-and-exclamation-mark/ 最近有空可以让我静下心来看看各种代码,function与感叹号的频繁出现,让我回想起2 ...

  3. java ---线程wait/notify/sleep/yield/join

    一.线程的状态 Java中线程中状态可分为五种:New(新建状态),Runnable(就绪状态),Running(运行状态),Blocked(阻塞状态),Dead(死亡状态). New:新建状态,当线 ...

  4. NYOJ题目836画图

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAsoAAAMbCAIAAADb4SQpAAAgAElEQVR4nO3du1Iq3dYG4H0T5l6IMR

  5. php单双引号

    1.定义字符串 定义字符串时,只有一种引号被视为定义符,即单引号或双引号.于是,如果一个字符串由双引号开始,那么只有双引号被分析器解析.这样,你就可以在双引号串中包含任何其他字符,甚至单引号.下面的引 ...

  6. Jmeter 函数

    一._csvRead 函数 _cvsRead函数是从外部读取参数,csvRead函数可以从一个文件中读取多个参数. 步骤: 1.先新建一个文件,例如c.txt,里面的数据存放为 web@qq.com, ...

  7. Clr Via C#读书笔记---垃圾回收机制

    #1 垃圾回收平台的基本工作原理: 访问一个资源所需的具体步骤: 1)调用IL指令newobj,为代表资源的类型分配内存.在C#中使用new操作符,编译器就会自动生成该指令.2)初始化内存,设置资源的 ...

  8. 设计模式学习之外观模式(Facade,结构型模式)(8)

    1.什么是外观模式为子系统中的一组接口提供一个一致的界面,Facade模式定义了一个高层接口,这个接口使得这一子系统更加容易使用 2.为什么要使用外观模式在软件开发系统中,客户程序经常会与复杂系统的内 ...

  9. MVC中Form表单的提交

    概述 Web页面进行Form表单提交是数据提交的一种,在MVC中Form表单提交到服务器.服务端接受Form表单的方式有多种,如果一个Form有2个submit按钮,那后台如何判断是哪个按钮提交的数据 ...

  10. 【翻译二十二】java-并发之集合与原子变量

    Concurrent Collections The java.util.concurrent package includes a number of additions to the Java C ...