table样式、合并行、合并列、添加背景图等

最新推荐文章于 2024-02-04 10:53:44 发布

佛佛ง

最新推荐文章于 2024-02-04 10:53:44 发布

阅读量1.4k

点赞数

分类专栏： HTML 文章标签： css

本文链接：https://blog.csdn.net/LzzMandy/article/details/122731205

版权

HTML 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

dom:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/table.css"/>
	</head>
	<body>
		<table id="customers">
			<caption>Table 1.1 Customers</caption>
			<tr>
				<th>Company</th>
				<th colspan="2">Contact</th>
			</tr>
			<tr>
				<td rowspan="3" class="bg-img">
					<ul>
					    <li>苹果</li>
					    <li>香蕉</li>
					    <li>菠萝</li>
					</ul>
				</td>
			</tr>
			<tr class="alt">
				<td>Christina Berglund</td>
				<td>Sweden</td>
			</tr>
			<tr>
				<td>Francisco Chang</td>
				<td>Mexico</td>
			</tr>
			<tr class="alt">
				<td>Ernst Handel</td>
				<td>Roland Mendel</td>
				<td>Austria</td>
			</tr>
			<tr>
				<td>Island Trading</td>
				<td>Helen Bennett</td>
				<td>UK</td>
			</tr>
			<tr class="alt">
				<td>Königlich Essen</td>
				<td>Philip Cramer</td>
				<td>Germany</td>
			</tr>
			<tr>
				<td>Laughing Bacchus Winecellars</td>
				<td>Yoshi Tannamuri</td>
				<td>Canada</td>
			</tr>
			<tr class="alt">
				<td>Magazzini Alimentari Riuniti</td>
				<td>Giovanni Rovelli</td>
				<td>Italy</td>
			</tr>
			<tr>
				<td>North/South</td>
				<td>Simon Crowther</td>
				<td>UK</td>
			</tr>
			<tr class="alt">
				<td>Paris spécialités</td>
				<td>Marie Bertrand</td>
				<td>France</td>
			</tr>
		</table>

	</body>
</html>

样式：

table {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	width: 90%;
	border-collapse: collapse;
	/* border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开 */
	border: 8px solid green;
	/* 指定CSS表格边框，使用border属性。 */
}

caption {
	caption-side: bottom;
}
table .bg-img{
	background: url(http://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/gh_33446d7f7a26_430.jpg) yellow no-repeat center center;
	background-size: 25% 50%;
}
table td,
table th {
	font-size: 16px;
	border: 1px solid #98bf21;
	padding: 3px 7px 2px 7px;
	height: 50px;
	text-align: left;
	vertical-align: center;/* 垂直对齐 */
	width:33%;
}

table th {
	font-size: 18px;
	text-align: left;
	padding-top: 5px;
	padding-bottom: 4px;
	background-color: #A7C942;
	color: #ffffff;
}

table tr.alt td {
	color: #000000;
	background-color: #EAF2D3;
}
table tr:hover{
	background-color: lightpink;
}

佛佛ง

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
table样式、合并行、合并列、添加背景图等

dom:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" type="text/css" hre...
复制链接

扫一扫