Table表格样式

样式如下：

<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>

运行结果：

时间： 2024-08-28 20:29:03

Table表格样式的相关文章

BootStrap的table表格，栅格系统，form表单的样式

BootStrap BootStrap的简介 1. 什么是Bootstrap 由两个前端设计师开发的一个前端的框架(Html,css,js) 简化了程序员写css的代码 2. 为什么使用BootStrap,有什么特点 l 学习比较简单,有了Html,css和js就能学习 l 响应式布局,可以适应多种的设备 l 移动设备优先 BootStrap的使用环境的安装官网上下载包要想使用bootStrap 必须加载jquery bootStrap的基本模板 1. Html文

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

原文地址:http://www.divcss5.com/wenji/w503.shtml 对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对table和td技巧性设置表格边框 4.对table和td设置背景,实现完美表格边框以下DIVCSS5对以上几种实现html 表格边框样式进行讲解与案例演示.为了便于观察,divcss5均设置所有案例表格为1px实线红色边框为例:table宽度为400px;表格为三列三行,对以上四种情况表格外层加个div

table表格某一td内容太多导致样式混乱的解决方案

在开发过程难免遇到这样那样的问题.对于有很多条目的数据,我们通常采用table元素来快速实现.如果某一个td的内容太多的话就会出现下面的情况,导致样式混乱难看. 解决方案要让table的宽度固定我们可以给table元素设置table-layout:fixed;样式,但这样表格的宽度问题是解决了,但是里面的内容并不会自动换行.我们还需要给td设置word-break: break-all; word-wrap:break-word;即可完美解决. http://www.7kxs.com/4gsh

Table表格横竖线实现Css

.tablel { border-collapse:collapse; /* 关键属性:合并表格内外边框(其实表格边框有2px,外面1px,里面还有1px哦) */ border:solid #999; /* 设置边框属性:样式(solid=实线).颜色(#999=灰) */ border-width:1px 0 0 1px; /* 设置边框状粗细:上右下左 = 对应:1px 0 0 1px */} .tablel th{border:solid #999;border-width:0 1

自己编写jQuery插件之表格样式（银光棒）

又来吐嘈了,实在是忍不住:换工作以来的第一次上班迟到.早上坐车,坐了4站路发现路线不对,问司机,司机说从今天起换路线了.尼玛,立马下车换乘.换了车,开了2站路,车子坏了,再次被迫下车.就近站牌等车,第一次车没靠站,直接走了,第二次很挤,没法还得上.终于到了公司楼下,fuck,电梯坏了,最终我迟到了......一个美好的早晨,我就这样被老天爷给轮了! 先上图: 上面这张图有3种状态,默认状态(灰白相间),鼠标悬浮状态(绿色),鼠标点击状态(黄色). Html代码如下: <table> <t

表格样式

1.去除表格td默认间距及制作1px细线表格方案一: 在页面内,通过cellspacing="0″将这个间距消除,合并边框. 方案二:在CSS定义里,只要给这个table一个border-collapse:collapse的样式,就可以达到这个效果表格样式,布布扣,bubuko.com

我理解的<table>表格

<table>表格 [默认样式] //IE7-浏览器不支持border-spacing table{ border-collapse: separate; border-spacing: 2px; border: 1px solid gray; } [属性] [1]border(在html5中,border只能为"1"或" ") border="0"//没有边框 border="8"//8像素宽的边框 [2]cel

CSS小知识---table表格

所用的仍是bootstrap的模板 <link rel="stylesheet" href="css/bootstrap.min.css"> <script type="text/javascript" src="js/bootstrap.min.js"></script> <script type="text/javascript" src="js/jq

美丽的表格样式(使用CSS样式表控制表格样式)

按照WEB2.0风格,设计了几个表格样式,希望大家喜欢. WEB2.0提倡使用div开布局,但不是要全然放弃使用表格,表格在数据展现方面还是不错的选择. 如今使用介绍使用CSS样式表来控制.美化表格的方法. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><