推荐一篇利用th,colgroup,col定义表格样式

定义表格各列的样式，不用每个td都在那里加一堆的Class，利用th,colgroup,col等属性，轻松搞定^_^
代码如下：


代码如下:

<style>
table.Demo {
  border-collapse: collapse;
  color: #454545;
  font: 11px/150% Verdana, Arial, Helvetica, sans-serif;
}
table.Demo th {
  padding: 3px 7px;
  border: 1px solid #f60;
  border-width: 2px 1px 1px;
  background: #ffffe1;
}
table.Demo td {
  padding: 3px 7px;
  border: 1px solid #f60;
}
table.Demo col.Col1 {
  text-align: right;
  background: #f5f5f5;
}
table.Demo col.Col2 {
  color: #00c;
}
table.Demo col.Col3 {
  font-style: italic;
}
</style>
<table class="Demo">
  <tr>
    <th>TagName</th>
    <th>ClassName</th>
    <th>CSS</th>
  </tr>
  <colgroup>
    <col class="Col1" />
    <col class="Col2" />
    <col class="Col3" />
  </colgroup>
  <tr>
    <td>table</td>
    <td>Demo</td>
    <td>border-collapse: collapse;<br />color: #454545;<br />font: 11px/150% Verdana, Arial, Helvetica, sans-serif;</td>
  </tr>
  <tr>
    <td>th</td>
    <td></td>
    <td>padding: 3px 7px;<br />border: 1px solid #f60;<br />border-width: 2px 1px 1px;<br />background: #ffffe1;</td> 
  </tr>
  <tr>
    <td>td</td>
    <td></td>
    <td>padding: 3px 7px;<br />border: 1px solid #f60;</td>
  </tr>
  <tr>
    <td>col</td>
    <td>Col1</td>
    <td>text-align: right;<br />background: #f5f5f5;</td>
  </tr>
  <tr>
    <td>col</td>
    <td>Col2</td>
    <td>color: #00c;</td>
  </tr>
  <tr>
    <td>col</td>
    <td>Col3</td>
    <td>font-style: italic;</td>
  </tr>
</table>

抛砖引玉，更多效果就由你DIY了！

table.Demo {
border-collapse: collapse;
color: #454545;
font: 11px/150% Verdana, Arial, Helvetica, sans-serif;
}
table.Demo th {
padding: 3px 7px;
border: 1px solid #f60;
border-width: 2px 1px 1px;
background: #ffffe1;
}
table.Demo td {
padding: 3px 7px;
border: 1px solid #f60;
}
table.Demo col.Col1 {
text-align: right;
background: #f5f5f5;
}
table.Demo col.Col2 {
color: #00c;
}
table.Demo col.Col3 {
font-style: italic;
}

TagName ClassName CSS
table Demo border-collapse: collapse;
color: #454545;
font: 11px/150% Verdana, Arial, Helvetica, sans-serif;
th padding: 3px 7px;
border: 1px solid #f60;
border-width: 2px 1px 1px;
background: #ffffe1;
td padding: 3px 7px;
border: 1px solid #f60;
col Col1 text-align: right;
background: #f5f5f5;
col Col2 color: #00c;
col Col3 font-style: italic;

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • repeater、gridview 在绑定时判断判断显示不同的行样式或文本

    一:repeater或DataList控件 1.更改纯文本内容等 如果数据库里学生信息表中的sex字段用0和1来表示男女 但我们想repeat控件绑定后性别显示男或女而不是显示0或1 方法一:当然我们可以在SQL语句里判断并且转换 select (case sex when 0 then '男' else '女' end) AS sex from studentInfo 方法二:就是用到repeat 控件ItemDataBound()事件 前台 复制代码 代码如下: <asp:Repearter

  • srcElement表格样式

    <script language="JavaScript1.2"> function changeto(highlightcolor){ source=event.srcElement if (source.tagName=="TR"||source.tagName=="TABLE") return while(source.tagName!="TD") source=source.parentElement if

  • jquery实现表格奇数偶数行不同样式(有图为证及实现代码)

    jquery实现表格奇数偶数行不同样式(有图为证及实现代码)

    非侵入实现,控制更方便 效果图:   复制代码 代码如下: <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>javascript practice</title> <script type="text/javascript" src="jq

  • 一个简单但常用的javascript表格样式_鼠标划过行变色 简洁实现

    第一个太简单就不说了,第二个也很简单,但每个人都有不同的实现方法,下面给一个比较简洁的做法,支持IE6.IE7.FF2,其他浏览器未测试(可以扩展一下用到ASP.NET的GridView里): 鼠标划过表格行变色-简洁实现 #tb{width:666px;border-collapse:collapse;border:1px solid #EEE;font-size:14px;} #tb th{background:#EEE;border-bottom:1px solid #CCC;paddin

  • js奇偶数判断的代码

    有两个变量 a 和 b  如果a=1,3,5,7,9 则b="奇数" 如果a=2,4,6,8  则b="偶数" 如果a="0" 则b="零" 9){alert("大于9被强行改为1");alert(chk(1));}else if(num [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • 推荐一篇利用th,colgroup,col定义表格样式

    定义表格各列的样式,不用每个td都在那里加一堆的Class,利用th,colgroup,col等属性,轻松搞定^_^ 代码如下: 复制代码 代码如下: <style> table.Demo {   border-collapse: collapse;   color: #454545;   font: 11px/150% Verdana, Arial, Helvetica, sans-serif; } table.Demo th {   padding: 3px 7px;   border: 

  • 利用vue和element-ui设置表格内容分页的实例

    html代码 因为我写在template中,也就是新建了组建中,贴出代码. <el-pagination small layout="prev, pager, next" :total="total" @current-change="current_change"> </el-pagination> 代码中,small代表是否使用小型分页样式 layout代表组件布局,子组件名用逗号分隔 属性: total代表总条目数

  • Vuejs第八篇之Vuejs组件的定义实例解析

    本文参考官方文档整理的一篇更加细致代码更加安全的一篇适合新手阅读学习吧教程. 本篇资料来于官方文档: http://cn.vuejs.org/guide/components.html 什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 组件的定义 ①组件的作用: [1]扩展HT

  • 利用Vue3实现可复制表格的方法详解

    目录 前言 最基础的表格封装 实现复制功能 处理表格中的不可复制元素 测试 前言 表格是前端非常常用的一个控件,但是每次都使用v-for指令手动绘制tr/th/td这些元素是非常麻烦的.同时,基础的 table 样式通常也是不满足需求的,因此一个好的表格封装就显得比较重要了. 最基础的表格封装 最基础基础的表格封装所要做的事情就是让用户只关注行和列的数据,而不需要关注 DOM 结构是怎样的,我们可以参考 AntDesign,columns dataSource 这两个属性是必不可少的,代码如下:

  • FF下 用 col 隐藏表格列的方法详解！

    今天,我在一个有52个字段的报表时,迫使我深入的做了一下研究, 我发现: col在ff下的display 的默认值是:table-column  visibility的默认值为:visible 我又查查了CSS手册,发现 visibility 有一个 collapse的可选值,据说在IE下是没有实现的,IE没实现不竺于FF没有实现,就像FF不支持的不一定IE不支持一样. BT的我,一个一个试了一遍, 终于发现了! FF下可以用下面的方法,用COL把表格的列给隐藏! 欢呼! 复制代码 代码如下:

  • 利用Python实现读取Word表格计算汇总并写入Excel

    利用Python实现读取Word表格计算汇总并写入Excel

    目录 前言 一.首先导入包 二.读评价表所在的目录文件 三.读word文件,处理word中的表格数据 四.统计计算 五.将统计计算结果写入汇总Excel 完整代码 总结 前言 快过年了,又到了公司年底评级的时候了.今年的评级和往常一下,每个人都要填写公司的民主评议表,给各个同事进行评价打分,然后部门收集起来根据收集上来的评价表进行汇总统计.想想要收集几十号人的评价表,并根据每个人的评价表又要填到Excel中进行汇总计算统计给出每个人的评价,就头大.虽然不是个什么难事,但是是个无脑的细致活.几十个

  • 第六篇Bootstrap表格样式介绍

    第六篇Bootstrap表格样式介绍

    基本表格: <table> <tr><td>用户名</td><td>密码</td></tr> <tr><td>啊啊啊</td><td>1111</td></tr> </table> 在<table>标签添加.table类可以为其赋予基本的样式 ,少量的内补(padding)和水平方向的分隔线. 显示效果如下: 条纹状表格: 在t

  • jQuery利用键盘上下键移动表格内容

    jQuery利用键盘上下键移动表格内容

    本文实例为大家分享了jQuery利用键盘上下键移动表格内容的具体代码,供大家参考,具体内容如下 在我们编辑表格内容时,经常需要将表格内容的位置进行移动,而利用键盘上下键进行移动是十分方便的. 效果如下: 基本原理是:先使用鼠标选中其中的一行,随后使用键盘上下键,通过获取不同的键值区分上移和下移的操作,随后首先交换两行的编号,随后交换两行的内容,保证了两行内容移动而编号不改变. 下面是代码: function clickA(obj){             currentLine=$.trim(

  • 推荐一篇批处理最完整人性化教程第1/3页

    这是一篇技术教程,我会用很简单的文字表达清楚自己的意思,你要你识字就能看懂,就能学到知识.写这篇教程的目的,是让每一个看过这些文字的朋友记住一句话:如果爱可以让事情变的更简单,那么就让它简单吧!看这篇教程的方法,就是慢!慢慢的,如同品一个女人.一杯茗茶,你会发现很多以前就在眼前的东西突然变的很遥远,而有些很遥远的东西却又突然回到了眼前. 先概述一下批处理是个什么东东.批处理的定义,至今我也没能给出一个合适的----众多高手们也都没给出----反正我不知道----看了我也不一定信服----我是个菜

  • 推荐一篇入门级的Class文章

    刚在大略浏览了一下首页更新的那篇有关Class的文章(指PHPE的那篇 http://www.phpe.net/articles/389.shtml ),很不错,建议看看.  对类的摸索--俺用了半年时间才大概理解类的作用和实现.主要是没有一篇能让我理解的文章(之前没接触过任何OO的东西).  以我的观点来说说PHP中的Class,用于表达的语言都是非正式的语言,也不能确定是否正确.  建立一个类很简单. class my_class {} 类到底干什么呢?很多人都是什么黑匣子,我在这里称它为一

随机推荐