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. Qt 安装一个Service

    QString command = "sc create YourServiceName binPath= \""+application_path+"\&qu ...

  2. DX使用texconv工具批处理dds格式图片

    texconv D:\png\*.* -o E:\dds -m 5 -f dxt3 -ft dds 上述命令的意思是把D:\png目录下的全部文件(当然可以指定特定格式例如*.png)转换成dds格式 ...

  3. python基础——使用模块

    python基础——使用模块 Python本身就内置了很多非常有用的模块,只要安装完毕,这些模块就可以立刻使用. 我们以内建的sys模块为例,编写一个hello的模块: #!/usr/bin/env ...

  4. iOS高效调试

    写代码难免出现bug. 储备些调试技能绝对能够提高你的工作效率,让bug无所遁形.下面就和大家分享一些我在工作中常用的iOS调试小技能. 1. 打印 最简单,基础的调试方法就是打印日志了.贴出两段封装 ...

  5. JavaWeb学习--Servlet认识

    Servlet开发 用户在浏览器中输入一个网址并回车,浏览器会向服务器发送一个HTTP请求.服务器端程序接受这个请求,并对请求进行处理,然后发送一个回应.浏览器收到回应,再把回应的内容显示出来.这种请 ...

  6. 实现QQ在线咨询(需先添加好友)

    实现效果如图: 点击客服专员一.二.三之后提示添加qq好友,进行聊天. 代码如下: <div class="attachLeft"> <img src=" ...

  7. android HTTPclient

    Apache包是对android联网访问封装的很好的一个包,也是android访问网络最常用的类. 下面分别讲一下怎么用HttpClient实现get,post请求. 1.Get 请求 1 2 3 4 ...

  8. Faster-rnnlm代码分析3 - EvaluateLM(前向计算ForwardPropagate)

    先采用一个简单的输入文本做测试 [root@cq01-forum-rstree01.cq01.baidu.com rnnlm]# pwd /home/users/chenghuige/rsc/app/ ...

  9. ASP.NET MVC 使用带有短横线的html Attributes(转载)

    转载地址:http://www.nmtree.net/2013/10/25/asp-net-mvc-use-dash-in-html-attributes.html 情景再现 我们常常需要一个文本框来 ...

  10. HTML5学习之WebSocket通讯(六)

    WebSocket是下一代客户端-服务器的异步通信方法. WebSocket最伟大之处在于服务器和客户端可以在任意时刻相互推送信息 WebSocket允许跨域通信 Ajax技术需要客户端发起请求,We ...