表格隔行换色

最新推荐文章于 2024-11-11 23:26:32 发布

lssxlh

最新推荐文章于 2024-11-11 23:26:32 发布

阅读量280

点赞数

分类专栏： JQUERy 文章标签： xhtml border function class html 文档

本文链接：https://blog.csdn.net/lssxlh/article/details/6857142

版权

JQUERy 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){
	$(".tb-tableviewer tbody tr:even").addClass("even");
	$(".tb-tableviewer tbody tr:odd").addClass("odd");
});
</script>
<style type="text/css">
.tb-tableviewer
{
	width: 100%;
	border-collapse: collapse;
	font-size: 18px;
	border: 1px solid #c1dad7;
}
.tb-tableviewer th, td
{
	border: 1px solid #c1dad7;
}
.tb-tableviewer thead th
{
	color: #454545;
	background-color: #cae8ea;
	padding: 4px 0;
	letter-spacing: 2px;
}

.tb-tableviewer tbody td
{
	padding: 3px 1px 3px 7px;
}
.tb-tableviewer tfoot td
{
	text-align: right;
	padding: 3px 7px 3px 1px;
}
.even
{
	background-color: #fff;
}
.odd
{
	background-color: #f5fafa;
}
</style>
</head>

<body>
<table class=tb-tableviewer>
  <thead>
    <tr>
      <th nowrap>标题</th>
      <th nowrap>分类</th>
      <th nowrap>发布时间</th>
      <th nowrap>发布者 </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a href='#'>我是标题</a></td>
      <td>1</td>
      <td>2007-08-22 15:25</td>
      <td>1</td>
    </tr>
    <tr>
      <td><a href='#'>哈哈哈</a></td>
      <td>2</td>
      <td>2007-08-22 14:34</td>
      <td>1</td>
    </tr>
    <tr>
      <td><a href='#'>呵呵呵</a></td>
      <td>42</td>
      <td>2007-08-22 14:06</td>
      <td>1</td>
    </tr>
    <tr>
      <td><a href='#'>我是标题</a></td>
      <td>1</td>
      <td>2007-08-22 15:25</td>
      <td>1</td>
    </tr>
    <tr>
      <td><a href='#'>哈哈哈</a></td>
      <td>2</td>
      <td>2007-08-22 14:34</td>
      <td>1</td>
    </tr>
    <tr>
      <td><a href='#'>呵呵呵</a></td>
      <td>42</td>
      <td>2007-08-22 14:06</td>
      <td>1</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan=5>第一页</td>
    </tr>
  </tfoot>
</table>
</body>
</html>