文档章节

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
表格行与列边框样式处理的原理分析及实战应用

欢迎大家前往腾讯云社区,获取更多腾讯海量技术实践干货哦~ 作者:韩宇波 导语:table之间的边框存在共用问题,自然而然就存在冲突。既然存在冲突,那么就势必涉及到最后渲染哪一个样式的问题...

腾讯云加社区
2017/11/07
0
0
TABLE固定宽度输出文本自动换行

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

求渔
2012/12/23
0
0
CSS注意事项(一)

层叠的概念 层叠规则重点:自上而下,相同属性:一般后面的覆盖前面的,优先级高的覆盖优先级低的 层叠是CSS的核心机制,理解了它才能以最经济的方式写出最容易改动的CSS, 让文档外观在达到...

ShirlyK
2016/08/27
11
0
网站美化常见CSS

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

数通畅联
2016/12/23
34
0

没有更多内容

加载失败,请刷新页面

加载更多

读书(附电子书)|小狗钱钱之白色的拉布拉多

关注公众号,在公众号中回复“小狗钱钱”可免费获得电子书。 一、背景 之前写了一篇文章 《小狗钱钱》 理财小白应该读的一本书,那时候我才看那本书,现在看了一大半了,发现这本书确实不错,...

tiankonguse
33分钟前
0
0
Permissions 0777 for ‘***’ are too open

异常显示: @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @ WARNING: UNPROTECTED PRIVATE KEY FILE! @ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ ......

李玉长
35分钟前
0
0
区块链10年了,还未落地,它失败了吗?

导读 几乎每个人,甚至是对通证持怀疑态度的人,都对区块链的技术有积极的看法,因为它有可能改变世界。然而,区块链技术问世已经10年了,我们仍然没有真正的用上区块链技术。 几乎每个人,甚...

问题终结者
今天
2
0
20180921 su与sudo命令、限制root用户通过ssh远程登录

su 命令 用户切换。 su # 切换到root用户su username # 切换到username用户# su 后面加-时,会初始化当前用户的各种环境su - username # 指定用户执行某些命令 su - -c "touch /tm...

野雪球
今天
2
0
Windows 下双 Python 开发环境配置

Windows 下双 Python 开发环境配置作者:老农民(刘启华)QQ: 46715422Email: 46715422@qq.com微信: 46715422 本人曾经在 Windows 下被两个版本环境折腾够呛,现在总结两个 Python...

新疆老农民
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部