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

  1. <style>
  2. table, th , td {
  3. border: 1px solid grey;
  4. border-collapse: collapse;
  5. padding: 5px;
  6. }
  7. table tr:nth-child(odd) {
  8. background-color: #f1f1f1;
  9. }
  10. table tr:nth-child(even) {
  11. background-color: #ffffff;
  12. }
  13. </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. 真机测试无缘无故finish了。程序也没有启动

    去钥匙串里边把多余的证书删除, 然后reset xcode - preference - 选中你的appleID - iOS Development  -  reset

  2. objective-c可变字典

     1 #pragma mark *****************************字典********************************  2 //        字典:通过ke ...

  3. 当对服务器端返回的极光推送数据请求时,AFN 的 GET 请求失败如何解决

    代码段 控制台   只需在 manager 那里添加一行代码即可 //传入json格式数据,不写则普通post     manager.requestSerializer = [AFJSONReque ...

  4. stm32——NFC芯片--PN532的使用

    stm32——NFC芯片--PN532的使用 一.NFC简介 NFC(Near Field Communication)近场通信,是一种短距高频的无线电技术,在13.56MHz频率运行于20厘米距离内 ...

  5. Git的一些实用操作

    Ref:http://stackoverflow.com/questions/17195861/undo-git-update-index-assume-unchanged-file 1. 添加本地忽 ...

  6. Codeforces Round #304 C(Div. 2)(模拟)

    题目链接: http://codeforces.com/problemset/problem/546/C 题意: 总共有n张牌,1手中有k1张分别为:x1, x2, x3, ..xk1,2手中有k2张 ...

  7. Linux性能分析工具的安装和使用

    转自:http://blog.chinaunix.net/uid-26488891-id-3118279.html Normal 0 7.8 磅 0 2 false false false EN-US ...

  8. 设计模式学习之桥接模式(Bridge,结构型模式)(15)

    参考地址:http://terrylee.cnblogs.com/archive/2006/02/24/336652.html 概述 在软件系统中,某些类型由于自身的逻辑,它具有两个或多个维度的变化, ...

  9. 设计模式学习之观察者模式(Observer,行为型模式)(7)

    1.观察者模式又叫做发布-订阅模式. 2.观察者模式定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象.这个主题对象在状态发生变化时,会通知所有观察者对象,使它们能够自动更新自己. 3 ...

  10. python 之socket 网络编程

    socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄,应用程序通常通过"套接字"向网络发出请求或者应答网络请求. socket起源于Un ...