css零到一基础教程047：CSS 表格

最新推荐文章于 2024-07-25 22:09:37 发布

慕容屠苏

最新推荐文章于 2024-07-25 22:09:37 发布

阅读量174

点赞数

分类专栏： css零到一文章标签： css html 前端

本文链接：https://blog.csdn.net/kerryqpw/article/details/123657964

版权

本文详述了如何使用CSS改进HTML表格的外观，包括设置表格边框、创建全宽表格、合并边框、调整宽度和高度、控制对齐方式、设置内边距、添加水平分隔线、实现悬停效果、创建条状表格、应用颜色以及实现响应式设计。通过实例展示各种CSS属性的用法，帮助读者深入理解并掌握CSS在表格设计中的应用。

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

使用 CSS 可以极大地改善 HTML 表格的外观：

<!DOCTYPE html>
<html>
<head>
<style>
#customers {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4CAF50;
  color: white;
}
</style>
</head>
<body>
<table id="customers">
	<tr>
		<th>Company</th>
		<th>Contact</th>
		<th>Address</th>
		<th>City</th>
	</tr>
	&