文档章节

table-样式1

0000001
 0000001
发布于 2014/06/28 10:44
字数 253
阅读 15
收藏 0

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>table-</title>
</head>
<body>
 <!-- Javascript goes in the document HEAD -->
<script type="text/javascript">
function altRows(id){
 if(document.getElementsByTagName){ 
  
  var table = document.getElementById(id); 
  var rows = table.getElementsByTagName("tr");
  
  for(i = 0; i < rows.length; i++){         
   if(i % 2 == 0){
    rows[i].className = "evenrowcolor";
   }else{
    rows[i].className = "oddrowcolor";
   }     
  }
 }
}

window.onload=function(){
 altRows('alternatecolor');
}
</script>


<!-- CSS goes in the document HEAD or added to your external stylesheet -->
<style type="text/css">
table.altrowstable {
 font-family: verdana,arial,sans-serif;
 font-size:11px;
 color:#333333;
 border-width: 1px;
 border-color: #a9c6c9;
 border-collapse: collapse;
}
table.altrowstable th {
 border-width: 1px;
 padding: 8px;
 border-style: solid;
 border-color: #a9c6c9;
}
table.altrowstable td {
 border-width: 1px;
 padding: 8px;
 border-style: solid;
 border-color: #a9c6c9;
}
.oddrowcolor{
 background-color:#d4e3e5;
}
.evenrowcolor{
 background-color:#c3dde0;
}
</style>


<!-- Table goes in the document BODY -->
<table id="alternatecolor">
<tr>
 <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr>
 <td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
 <td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
</tr>
<tr>
 <td>Text 3A</td><td>Text 3B</td><td>Text 3C</td>
</tr>
<tr>
 <td>Text 4A</td><td>Text 4B</td><td>Text 4C</td>
</tr>
<tr>
 <td>Text 5A</td><td>Text 5B</td><td>Text 5C</td>
</tr>
</table>

<!--  The table code can be found here: http://www.textfixer/resources/css-tables.php#css-table03 -->

 

</body>
</html>

本文转载自:http://blog.csdn.net/nightelve/article/details/7957726

共有 人打赏支持
0000001
粉丝 35
博文 141
码字总数 46256
作品 0
朝阳
前端工程师
私信 提问
[css] table-layout:fixed 属性的解说,IE、Firefox效果对比详解

table-layout:fixed 属性的解说 如果想要一个table固定大小,里面的文字强制换行(尤其是在一长串英文文本,并且中间无空格分隔的情 况下),以达到使过长的文字不撑破表格的目的,一般是使用样...

Dicky
2011/12/07
0
0
iview table表格的自定义样式

iview table表格的自定义样式 1.需求 背景颜色为深色背景 左侧可勾选checkbox 选中鼠标hover浮动到某行,当前行背景颜色更换为红色 斑马条纹 效果图 2.设计 iview的官方文档已经给出了解决方...

玩大神的OSChina
10/17
0
0
TABLE固定宽度输出文本自动换行

浏览器会根据页面的大小和table的内容自动的调整table中单元格的宽度,如需要固定表格中单元格的宽度: 1、最后一列的单元格样式设定为width:auto;同时表格的整体宽度需要大于所有单元格宽度...

求渔
2012/12/23
0
0
网站美化常见CSS

伴随网络时代日新月异的发展,用户不仅仅满足于软件系统的功能需求,对软件系统的页面显示效果以及交互模式的要求也逐渐提高。尤其是展示性质的平台页面对于界面美化效果要求更高,有一句话说...

数通畅联
2016/12/23
34
0
HTML与浏览器默认样式整理(CSS布局参考资料)

html, address,blockquote,body, dd, div,dl, dt, fieldset, form,frame, frameset,h1, h2, h3, h4,h5, h6, noframes,ol, p, ul, center,dir, hr, menu, pre { display: block } li { displa......

杨军军
2011/11/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

FinderWeb2.4.9 程序员的看日志利器

FinderWeb2.4.9 程序员的看日志利器 使用方法:管理员登录,分配对应用户的的主机和文件权限即可。 部署方式: 下载并解压到webapps目录即可 http://www.finderweb.net/download/finder-web...

吴伟祥
4分钟前
0
0
PHP的pcntl进程控制教程一(pcntl_fork)

pcntl 简介 PHP的进程控制支持实现了Unix方式的进程创建, 程序执行, 信号处理以及进程的中断。 进程控制不能被应用在Web服务器环境,当其被用于Web服务环境时可能会带来意外的结果。 这份文档...

hansonwong
9分钟前
0
0
php扩展模块安装

11月21日任务 11.32 php扩展模块装安装 /usr/local/php/bin/php -m //查看模块 下面安装一个redis的模块 cd /usr/local/src/ wget https://codeload.github.com/phpredis/phpredis/zip/deve......

zgxlinux
10分钟前
1
0
windows下使用IDEA创建VUE项目

1.环境搭建 1.1检测是否安装好nodejs和npm 检测命令 node -v npm -v 如果没有安装需要先安装 nodejs的下载路径:https://nodejs.org/en/download/ 在Windows上安装时务必选择全部组件,包括勾...

文文1
17分钟前
1
0
Mybatis插件plugin应用测试,替换查询sql

1、新建插件 import org.apache.ibatis.executor.CachingExecutor;import org.apache.ibatis.executor.Executor;import org.apache.ibatis.executor.parameter.ParameterHandler;im......

jcc_codingBoy
22分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部