table 样式以前

最新推荐文章于 2024-10-13 17:27:18 发布

abc81163788

最新推荐文章于 2024-10-13 17:27:18 发布

阅读量90

点赞数

分类专栏：前端文章标签： css html html5

本文链接：https://blog.csdn.net/abc81163788/article/details/120514288

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

这个示例展示了如何使用CSS来定义不同表格的样式，包括边框样式、内边距、字体风格、背景颜色以及行的交替颜色。示例中提到了三个表格ID：table-1, table-2, 和table-7，每个都有特定的头部背景色、字体颜色、边框宽度和样式，以及偶数行和奇数行的背景色差异。这些CSS规则用于增强表格的可读性和视觉效果。

摘要由CSDN通过智能技术生成

test.css

body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0} 
body{font:12px"宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;} 
a{color:#2d374b;text-decoration:none} 
a:hover{color:#cd0200;text-decoration:underline} 
em{font-style:normal} 
ul,ol,li{list-style:none} 
img{border:0;vertical-align:middle} 
table{border-collapse:collapse;border-spacing:0} 
p{word-wrap:break-word} 



/***********1**************/
/* Border styles */
#table-1 thead, #table-1 tr {
border-top-width: 1px;
border-top-style: solid;
border-top-color: rgb(230, 189, 189);
}
#table-1 {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: rgb(230, 189, 189);
}

/* Padding and font style */
#table-1 td, #table-1 th {
padding: 5px 10px;
font-size: 12px;
font-family: Verdana;
color: rgb(177, 106, 104);
}

/* Alternating background colors */
#table-1 tr:nth-child(even) {
background: rgb(238, 211, 210)
}
#table-1 tr:nth-child(odd) {
background: #FFF
}
/************2*************/
/* Border styles */
#table-2 thead, #table-2 tr {
border-top-width: 1px;
border-top-style: solid;
border-top-color: rgb(230, 189, 189);
}
#table-2 {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: rgb(230, 189, 189);
}

/* Padding and font style */
#table-2 td, #table-2 th {
padding: 5px 10px;
font-size: 12px;
font-family: Verdana;
color: rgb(177, 106, 104);
}

/* Alternating background colors */
#table-2 tr:nth-child(even) {
background: rgb(238, 211, 210)
}
#table-2 tr:nth-child(odd) {
background: #FFF
}
/*************7***************/
/* Table Head */
#table-7 thead th {
background-color: rgb(81, 130, 187);
color: #fff;
border-bottom-width: 0;
}

/* Column Style */
#table-7 td {
color: #000;
}
/* Heading and Column Style */
#table-7 tr, #table-7 th {
border-width: 1px;
border-style: solid;
border-color: rgb(81, 130, 187);
}

/* Padding and font style */
#table-7 td, #table-7 th {
padding: 5px 10px;
font-size: 12px;
font-family: Verdana;
font-weight: bold;
}

/* Alternating background colors */
#table-7 tr:nth-child(even) {
background: #CCDDFF;
}
#table-7 tr:nth-child(odd) {
background: #FFF;
}

test.html

<!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>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">
<link rel='stylesheet' href='public/style/test.css' type='text/css' media='all' />
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script>
<style>

</style>
</head>
<body>

<table id="table-7"> <!-- Replace "table-1" with any of the design numbers -->
<thead>
<th>Name</th>
<th>City</th>
<th>电话</th>
</thead>
<tbody>
<tr>
<td>Albert Ellis</td>
<td>New York</td>
<td>+1 718 000000</td>
</tr>
<tr>
<td>Marcus Aurelius</td>
<td>Rome</td>
<td>+1 718 000000</td>
</tr>
<tr>
<td>Epictetus</td>
<td>Greece</td>
<td>+1 718 000000</td>
</tr>
<tr>
<td>Aristotle</td>
<td>Greece</td>
<td>+1 718 000000</td>
</tr>
</tbody>
</table>


<script type="text/javascript">

</script>
</body>
</html>