1. 首页
  2. CSS 菜鸟教程
  3. CSS - 表格

CSS - 表格

表格是一种 HTML 元素，用于以包含行和列的结构化格式显示数据。它是使用 HTML 中的 <table> 标签创建的，可以使用 CSS 属性设置样式。

本章讨论如何使用 CSS 设置 HTML 表的不同属性。

让我们看下面的一个例子，它演示了一个简单的HTML表格：

<html>
<head>
<style>
</style>
	 <table>
			<thead>
			<tr>
				 <th>Header 1</th>
				 <th>Header 2</th>
				 <th>Header 3</th>
			</tr>
			</thead>
			<tbody>
			<tr>
				 <td>Data 1</td>
				 <td>Data 2</td>
				 <td>Data 3</td>
				 </tr>
			<tr>
				 <td>Data 1</td>
				 <td>Data 2</td>
				 <td>Data 3</td>
			</tr>
	 </tbody>
	 </table>
</body>
</html>

上面示例中的表格是一个简单的数据显示，可以使用 CSS 设置样式。您可以设置表的以下 CSS 属性 -

  • border-collapse 指定浏览器是否应控制相互接触的相邻边框的外观，或者每个单元格是否应保持其样式。
  • border-spacing 指定表格单元格之间应显示的宽度。
  • caption-side 指定表格标题的显示位置（顶部或底部）。
  • empty-cells 指定如果单元格为空，是否应显示边框。
  • table-layout 允许浏览器通过使用它在列的其余部分遇到的第一个宽度属性来加快表的布局，而不必在呈现之前加载整个表。
  • width 和 height 属性设置表的高度和宽度。
  • text-align 属性设置表格单元格中文本内容的水平对齐方式。
  • border 属性可用于将边框设置为表格及其单元格。
  • background-color 属性可以应用于表格本身、表格单元格或表格行。
  • font-size、font-family、font-weight、font-color 等样式为表格字体设置样式。

让我们看看如何使用这些属性，并在以下各节中通过示例。

CSS 表格 - 边框折叠

属性 border-collapse 可确保表单元格之间的边框折叠为单个边框，从而创建更清晰的外观。属性边框折叠的值可以是折叠或分离（默认）。

以下示例仅向表格的单元格和正文添加边框：

<html>
<head>
<style>
	 table {
			border: 3px solid purple;
	 }
	 th, td {
			border: 1px solid black;
	 }
</style>
<body>
	 <table>
			<thead>
			<tr>
				 <th>Header 1</th>
				 <th>Header 2</th>
				 <th>Header 3</th>
			</tr>
			</thead>
			<tbody>
			<tr>
				 <td>Data 1</td>
				 <td>Data 2</td>
				 <td>Data 3</td>
				 </tr>
			<tr>
				 <td>Data 1</td>
				 <td>Data 2</td>
				 <td>Data 3</td>
			</tr>
	 </tbody>
	 </table>
</body>
</html>

现在让我们添加 border-collapse：collapse 并查看这如何消除表格单元格之间的间距并导致边框重叠。

<html>
<head>
<style>
	 table {
			border-collapse: collapse;
			border: 3px solid purple;
	 }
	 th, td {
			border: 1px solid black;
	 }
</style>
<body>
	 <table>
			<thead>
			<tr>
				 <th>Header 1</th>
				 <th>Header 2</th>
				 <th>Header 3</th>
			</tr>
			</thead>
			<tbody>
			<tr>
				 <td>Data 1</td>
				 <td>Data 2</td>
				 <td>Data 3</td>
				 </tr>
			<tr>
				 <td>Data 1</td>
				 <td>Data 2</td>
				 <td>Data 3</td>
			</tr>
	 </tbody>
	 </table>
</body>
</html>

CSS 表格 - 边框间距

border-spacing 属性指定了表中相邻单元格的边界之间分隔的距离。此属性可以指定为一个或两个值。：

  • border-spacing： 2px;： 如果传递一个值，则间距将应用于垂直和水平边框。
  • border-spacing： 1cm 2em;：如果传递两个值，则第一个值定义单元格之间的水平间距（即相邻列中单元格之间的空间），第二个值定义单元格之间的垂直间距（即相邻行中单元格之间的空间）。

现在让我们修改前面的例子，看看效果 -

<html>
<head>
<style>
	 table {
			border-collapse: separate;
			border-spacing: 1em 0.5em;
			padding: 0 2em 1em 0;
			border: 3px solid purple;
	 }
	 td {
			width: 1.5em;
			height: 1.5em;
			background: #d2d2d2;
			text-align: center;
			vertical-align: middle;
	 }
</style>
<body>
	 <table>
			<thead>
			<tr>
				 <th>Header 1</th>
				 <th>Header 2</th>
				 <th>Header 3</th>
			</tr>
			</thead>
			<tbody>
			<tr>
				 <td>Data 1</td>
				 <td>Data 2</td>
				 <td>Data 3</td>
				 </tr>
			<tr>
				 <td>Data 1</td>
				 <td>Data 2</td>
				 <td>Data 3</td>
			</tr>
	 </tbody>
	 </table>
</body>
</html>
注意：border-spacing 属性仅在 border-collapse 设置为 separate 时才有效。如果将 border-collapse 设置为 collapse，则 border-spacing 属性将不起作用，并且 borders 将折叠为一条线。

下面是一个示例来演示上述观点：

<html>
<head>
<style>
	 table {
			border-collapse: collapse;
			border-spacing: 1em 0.5em;
			padding: 0 2em 1em 0;
			border: 3px solid purple;
	 }
	 td {
			width: 1.5em;
			height: 1.5em;
			background: #d2d2d2;
			text-align: center;
			vertical-align: middle;
	 }
</style>
<body>
	 <table>
			<thead>
			<tr>
				 <th>Header 1</th>
				 <th>Header 2</th>
				 <th>Header 3</th>
			</tr>
			</thead>
			<tbody>
			<tr>
				 <td>Data 1</td>
				 <td>Data 2</td>
				 <td>Data 3</td>
				 </tr>
			<tr>
				 <td>Data 1</td>
				 <td>Data 2</td>
				 <td>Data 3</td>
			</tr>
	 </tbody>
	 </table>
</body>
</html>

CSS 表格 - 标题侧

CSS 中的 caption-side 属性用于控制表格标题相对于表格的位置或对齐方式。

caption-side 属性可以具有以下值之一：

  • top：放置在表格上方的标题。
  • bottom：放置在表格下方的标题。
  • block-start：标题框位于表格的块开始边缘。
  • block-end：位于表格的块端边缘的字幕框 sis。
  • inline-start：标题框位于表格的内联开始边缘。
  • inline-end：标题框位于表格的内联结束边缘。
  • inherit：该值继承自父元素的 caption-side 属性。

让我们看一个例子：

<html>
<head>
<style>
	 .top caption {
			caption-side: top;
	 }
	 .bottom caption {
			caption-side: bottom;
	 }
	 table {
			border: 1px solid red;
	 }
	 td {
			border: 1px solid blue;
	 }
</style>
<body>
	 <table class="top">
			<caption>
				 Caption ABOVE the table
			</caption>
			<thead>
				 <tr>
						<th>Header 1</th>
						<th>Header 2</th>
						<th>Header 3</th>
				 </tr>
			</thead>
			<tbody>
				 <tr>
						<td>Data 1</td>
						<td>Data 2</td>
						<td>Data 3</td>
						</tr>
			</tbody>
	 </table>
	 <br />
	 <table class="bottom">
			<caption>
				 Caption BELOW the table
			</caption>
			<thead>
				 <tr>
						<th>Header 1</th>
						<th>Header 2</th>
						<th>Header 3</th>
				 </tr>
			</thead>
			<tbody>
				 <tr>
						<td>Data 1</td>
						<td>Data 2</td>
						<td>Data 3</td>
				 </tr>
			</tbody>
	 </table>
</body>
</html>
注意：caption-side 属性仅适用于其中包含 <caption> 元素的表。<caption> 元素用于提供表的标题或说明。如果表没有标题，则标题侧属性将不起作用。

CSS 表格 - 空单元格

CSS 中的 empty-cells 属性用于控制表中没有内容或被视为“空”的单元格的呈现。它仅适用于表格和表格单元格。

此属性可以具有以下两个值之一：

  • show：它表示空单元格应显示边框和间距，就好像它们包含内容一样。这是默认值。
  • hide：表示应隐藏空单元格且不占用任何空间。将不会显示空单元格的边框和间距，从而有助于实现更紧凑的布局。

这是用于隐藏 <table> 元素中空单元格边框的 empty-cells 属性。

<html>
<head>
<style>
	 table {
			width: 350px;
			border-collapse: separate;
			empty-cells: hide;
	 }
	 td,th {
			padding: 5px;
			border-style: solid;
			border-width: 1px;
			border-color: #999999;
	 }
</style>
</head>
<body>
	 <table>
			<thead>
				 <tr>
						<th>Header 1</th>
						<th>Header 2</th>
						<th>Header 3</th>
				 </tr>
			</thead>
			<tbody>
				 <tr>
						<td>Data 1</td>
						<td>Data 2</td>
						<td></td>
				 </tr>
			</tbody>
	 </table>
</body>
</html>

在以下示例中，empty-cells：show 属性用于显示 <table> 元素中空单元格的边框。

<html>
<head>
<style>
	 table {
			width: 350px;
			border-collapse: separate;
			empty-cells: show;
	 }
	 td,th {
			padding: 5px;
			border-style: solid;
			border-width: 1px;
			border-color: #999999;
	 }
</style>
</head>
<body>
	 <table>
			<thead>
				 <tr>
						<th>Header 1</th>
						<th>Header 2</th>
						<th>Header 3</th>
				 </tr>
			</thead>
			<tbody>
				 <tr>
						<td>Data 1</td>
						<td>Data 2</td>
						<td></td>
				 </tr>
			</tbody>
	 </table>
</body>
</html>

CSS 表格 - 表格布局

table-layout 属性应该可以帮助您控制浏览器应如何呈现或布局表格。

此属性可以具有下列值之一：

  • auto：当 table-layout 设置为 auto 时，浏览器将根据其内容计算列和单元格的宽度。
  • fixed：当 table-layout 设置为 fixed 时，浏览器会根据表格的第一行为每列分配固定的宽度。这意味着，无论其内容如何，所有后续行都将遵循相同的列宽。
注意：当您想要创建具有一致列宽的表格时，尤其是在处理大量数据或想要维护特定设计时，使用 table-layout： fixed 可能非常有用。

CSS 表格 - 具有固定布局

以下示例显示了 table-layout： fixed 的用法：

<html>
<head>
<style>
	 table {
			width: 100%;
			border-collapse: collapse;
			table-layout: fixed; /* Using fixed layout */
	 }

	 th, td {
			border: 1px solid black;
			padding: 8px;
			text-align: center;
	 }
</style>
</head>
<body>
	 <table>
			<tr>
				 <th>Header 1</th>
				 <th>Header 2</th>
				 <th>Header 3</th>
			</tr>
			<tr>
				 <td>Row 1, Column 1</td>
				 <td>Row 1, Column 2</td>
				 <td>Row 1, Column 3</td>
			</tr>
			<tr>
				 <td>Row 2, Column 1</td>
				 <td>Row 2, Column 2</td>
				 <td>Row 2, Column 3</td>
			</tr>
	 </table>
</body>
</html>

CSS 表格 - 具有自动布局功能

以下示例显示了 table-layout： auto 的用法：

<html>
<head>
<style>
	 table {
			width: 100%;
			border-collapse: collapse;
			table-layout: auto; /* Using auto layout */
	 }
	 th, td {
			border: 1px solid black;
			padding: 8px;
			text-align: center;
	 }
</style>
</head>
<body>
	 <table>
			<tr>
				 <th>Header 1</th>
				 <th>Header 2</th>
				 <th>Header 3</th>
			</tr>
			<tr>
				 <td>This is some longer content in Column 1</td>
				 <td>Short content</td>
				 <td>Even longer content that might wrap in Column 3</td>
			</tr>
			<tr>
				 <td>Row 2, Column 1</td>
				 <td>Row 2, Column 2</td>
				 <td>Row 2, Column 3</td>
			</tr>
	 </table>
</body>
</html>

CSS 表格 - 高度和宽度

要设置表的高度和宽度，请使用以下属性：

<html>
<head>
<style>
	 #myTable {
			width: 500px; /* Set the width of the table */
			height: 300px; /* Set the height of the table */
			border-collapse: collapse;
	 }

	 #myTable th, #myTable td {
			border: 5px solid black;
	 }
</style>
</head>
<body>
	 <table id="myTable">
			<thead>
			<tr>
				 <th>Header 1</th>
				 <th>Header 2</th>
				 <th>Header 3</th>
			</tr>
			</thead>
			<tbody>
			<tr>
				 <td>Data 1</td>
				 <td>Data 2</td>
				 <td>Data 3</td>
				 </tr>
				<tr>
					 <td>Data 1</td>
					 <td>Data 2</td>
					 <td>Data 3</td>
				</tr>
		 </tbody>
		 </table>
	</body>
</html>

CSS 表格 - 表格对齐方式

在 CSS 中，用于对齐它们的各种属性如下：

文本对齐

此属性设置表格单元格（<th> 或 <td>）中文本内容的水平对齐方式。它可以采用以下值：

  • left
  • right
  • center
  • justify
注意：默认情况下，<th> 元素的内容是居中对齐的，<td> 元素的内容是左对齐的。

让我们看一个 text-align： center 的例子：

<html>
<head>
<style>
table, td, th {
	 border: 2px solid black;
}
table {
	 border-collapse: collapse;
	 width: 50%;
}
td {
	 text-align: center;
}
</style>
</head>
<body>
	 <h2>Text-align Property</h2>
	 <table>
			<tr>
				 <th>Header 1</th>
				 <th>Header 2</th>
				 <th>Header 3</th>
				 <th>Header 4</th>
			</tr>
			<tr>
				 <td>Data 1</td>
				 <td>Data 2</td>
				 <td>Data 3</td>
				 <td>Data 4</td>
			</tr>
			<tr>
				 <td>Data 1</td>
				 <td>Data 2</td>
				 <td>Data 3</td>
				 <td>Data 4</td>
			</tr>
			<tr>
				 <td>Data 1</td>
				 <td>Data 2</td>
				 <td>Data 3</td>
				 <td>Data 4</td>
			</tr>
	 </table>
	 </body>
</html>

同样，要将文本向左或向右对齐，请分别使用属性 text-align： left 或 text-align： right

值 text-align： justify 可确保文本在每个单元格的左侧和右侧对齐，从而创建整洁有序的外观。

CSS 表格 - 垂直对齐

属性 vertical-align 以 <th> 或 <td> 为单位设置内容的垂直对齐方式。

它可以采用以下值：

  • top
  • middle
  • bottom
注意：默认情况下，<th> 和 <td> 元素的内容垂直对齐为中间对齐。

让我们看一个将垂直对齐设置为顶部的示例：

<html>
<head>
<style>
	 table, td, th {
			border: 2px solid black;
	 }
	 table {
			border-collapse: collapse;
			width: 50%;
	 }
	 td {
			height: 50px;
			vertical-align: top;
	 }
</style>
</head>
<body>
	 <h2>Vertical-align Property</h2>
	 <table>
			<tr>
				 <th>Header 1</th>
				 <th>Header 2</th>
				 <th>Header 3</th>
				 <th>Header 4</th>
			</tr>
			<tr>
				 <td>Data 1</td>
				 <td>Data 2</td>
				 <td>Data 3</td>
				 <td>Data 4</td>
			</tr>
			<tr>
				 <td>Data 1</td>
				 <td>Data 2</td>
				 <td>Data 3</td>
				 <td>Data 4</td>
			</tr>
			<tr>
				 <td>Data 1</td>
				 <td>Data 2</td>
				 <td>Data 3</td>
				 <td>Data 4</td>
			</tr>
	 </table>
</body>
</html>

CSS 表格 - 边框

在 CSS 中，有几个边框属性可以应用于表：

  • border：此属性设置表格边框的所有四个边的宽度、样式和颜色（例如，border：1px 纯黑色;
  • border-collapse：此属性设置边框是应折叠为单个边框，还是应在单元格之间分隔。
  • border-width：此属性设置边框的宽度（例如，border-width： thin|medium|thick|2px;）
  • border-style：此属性设置表格边框的样式（例如，border-style：虚线|虚线|实心|double;）等。
  • border-color：此属性设置表格边框的颜色（例如，（border-color： red;） 或 （border-top-color： red;））。
  • border-radius：此属性使表格边框的角变圆（例如，border-radius： 5px|50%）。

让我们看一个设置表格边框的例子：

<html>
<head>
<style>
	 table {
			border-collapse: collapse;
			border-radius: 50%;
			border-style: inset;
			border-color: blue;
			width: 100%;
	 }
	 td {
			border: 2px dashed red;
			height: 50px;
			vertical-align: middle;
			text-align: center;
	 }
</style>
</head>
<body>
	 <h2>Border property</h2>
	 <table>
			<tr>
				 <th>Header 1</th>
				 <th>Header 2</th>
				 <th>Header 3</th>
				 <th>Header 4</th>
			</tr>
			<tr>
				 <td>Data 1</td>
				 <td>Data 2</td>
				 <td>Data 3</td>
				 <td>Data 4</td>
			</tr>
			<tr>
				 <td>Data 1</td>
				 <td>Data 2</td>
				 <td>Data 3</td>
				 <td>Data 4</td>
			</tr>
			<tr>
				 <td>Data 1</td>
				 <td>Data 2</td>
				 <td>Data 3</td>
				 <td>Data 4</td>
			</tr>
	 </table>
</body>
</html>

CSS 表格 - 背景颜色

background-color 属性可以应用于表格本身、表格单元格或表格行。

要设置背景颜色，请使用以下代码：

/* To set the background color of table */
table {
	background-color: #f2f2f2;
}
/* To set the background color of a cell or a row */
td {
	background-color: #f2f2f2;
}
tr {
	background-color: #ffffff;
}

让我们看一个例子：

<html>
<head>
<style>
	 table {
			border: 2px solid black;
			background-color: rgb(237, 181, 237);
			width: 100%;
			border-collapse: collapse;
	 }
	 td {
			height: 50px;
			vertical-align: middle;
			text-align: center;
	 }
</style>
</head>
<body>
	 <h2>Background color property</h2>
	 <table>
			<tr>
				 <th>Header 1</th>
				 <th>Header 2</th>
				 <th>Header 3</th>
				 <th>Header 4</th>
			</tr>
			<tr>
				 <td>Data 1</td>
				 <td>Data 2</td>
				 <td>Data 3</td>
				 <td>Data 4</td>
			</tr>
			<tr>
				 <td>Data 1</td>
				 <td>Data 2</td>
				 <td>Data 3</td>
				 <td>Data 4</td>
			</tr>
			<tr>
				 <td>Data 1</td>
				 <td>Data 2</td>
				 <td>Data 3</td>
				 <td>Data 4</td>
			</tr>
	 </table>
</body>
</html>

CSS 表格 - 字体样式

可以使用 <th> 和 <td> 元素上的字体相关属性（如 font-size、font-family、font-weight 等）来设置表格内容的字体样式。

<html>
<head>
<style>
	 table.one {
			border-collapse: collapse;
			width: 400px;
	 }
	 th {
			font-size: large;
			font-family: 'Lucida Sans', sans-serif;
	 }
	 td {
			font-size: small;
			font-family: Verdana, Geneva, Tahoma, sans-serif;
	 }
</style>
</head>
<body>
	 <h2>font styles</h2>
	 <div>
			<table class = "one" border = "1">
				 <th>Heading</th>
				 <tr>
				 <td>Cell value</td>
				 </tr>
				 <tr>
				 <td>Cell value</td>
				 </tr>
			</table>
	 </div>
</body>
</html>

CSS 表格 - 其他样式

可以使用各种 CSS 属性来进一步设置表格设计的样式。例如，您可以向表格添加填充、边距、分隔符等。

让我们看几个例子：

CSS 表格 - 填充

要向表或其单元格添加填充，请使用属性填充。请参考以下示例：

<html>
<head>
<style>
	 table {
			border: 2px solid black;
			background-color: rgb(175, 239, 194);
			border-collapse: collapse;
	 }
	 td,th {
			border: 2px solid black;
			padding: 30px;
			vertical-align: middle;
			height: 50px;
	 }
</style>
</head>
<body>
	 <h2>Padding property</h2>
	 <table>
			<tr>
				 <th>Header 1</th>
				 <th>Header 2</th>
				 <th>Header 3</th>
				 <th>Header 4</th>
			</tr>
			<tr>
				 <td>Data 1</td>
				 <td>Data 2</td>
				 <td>Data 3</td>
				 <td>Data 4</td>
			</tr>
			<tr>
				 <td>Data 1</td>
				 <td>Data 2</td>
				 <td>Data 3</td>
				 <td>Data 4</td>
			</tr>
	 </table>
</body>
</html>

CSS 表格 - 边距

要添加表格或其单元格的边距，请使用属性边距。请参考以下示例：

<html>
<head>
<style>
	 table {
			border: 2px solid black;
			background-color: rgba(237, 181, 237);
			border-collapse: collapse;
			margin-top: 50px;
	 }
	 td,th {
			border: 2px solid black;
			vertical-align: middle;
			height: 50px;
	 }
</style>
</head>
<body>
	 <h2>Margin property</h2>
	 <table>
			<tr>
				 <th>Header 1</th>
				 <th>Header 2</th>
				 <th>Header 3</th>
				 <th>Header 4</th>
			</tr>
			<tr>
				 <td>Data 1</td>
				 <td>Data 2</td>
				 <td>Data 3</td>
				 <td>Data 4</td>
			</tr>
			<tr>
				 <td>Data 1</td>
				 <td>Data 2</td>
				 <td>Data 3</td>
				 <td>Data 4</td>
			</tr>
			<tr>
				 <td>Data 1</td>
				 <td>Data 2</td>
				 <td>Data 3</td>
				 <td>Data 4</td>
			</tr>
	 </table>
</body>
</html>

CSS 表格 - 表格分隔符（垂直/水平）

为了添加垂直或水平分隔符，您可以将属性 border-right 或 border-bottom 添加到 <th> 和 <th> 元素。

让我们看一个例子：

<html>
<head>
<style>
	 table {
			border: 2px solid black;
			background-color: rgb(175, 239, 194);
			border-collapse: collapse;
			margin-top: 50px;
	 }
	 th {
			border-bottom: 2px solid black;
	 }
	 td{
			border-right: 2px solid black;
			vertical-align: middle;
			height: 50px;
	 }
</style>
</head>
<body>
	 <h2>horizontal & vertical divider</h2>
	 <table>
			<tr>
				 <th>Header 1</th>
				 <th>Header 2</th>
				 <th>Header 3</th>
				 <th>Header 4</th>
			</tr>
			<tr>
				 <td>Data 1</td>
				 <td>Data 2</td>
				 <td>Data 3</td>
				 <td>Data 4</td>
			</tr>
			<tr>
				 <td>Data 1</td>
				 <td>Data 2</td>
				 <td>Data 3</td>
				 <td>Data 4</td>
			</tr>
	 </table>
</body>
</html>

CSS 表格 - 条带化表格

为了使表格看起来是条纹的，其中替代行是着色的，您可以使用第 nth-child（） 选择器并为表格的所有奇数/偶数行添加背景色。

让我们看一个例子：

<html>
<head>
<style>
	 table {
			border-collapse: collapse;
			width: 100%;
	 }

	 th, td {
			text-align: left;
			padding: 8px;
	 }

	 tr:nth-child(odd) {background-color: rgb(230,125,111);}
</style>
</head>
<body>
	 <h2>Striped table</h2>
	 <table>
			<tr>
				 <th>Header 1</th>
				 <th>Header 2</th>
				 <th>Header 3</th>
				 <th>Header 4</th>
			</tr>
			<tr>
				 <td>Data 1</td>
				 <td>Data 2</td>
				 <td>Data 3</td>
				 <td>Data 4</td>
			</tr>
			<tr>
				 <td>Data 1</td>
				 <td>Data 2</td>
				 <td>Data 3</td>
				 <td>Data 4</td>
			</tr>
			<tr>
				 <td>Data 1</td>
				 <td>Data 2</td>
				 <td>Data 3</td>
				 <td>Data 4</td>
			</tr>
			<tr>
				 <td>Data 1</td>
				 <td>Data 2</td>
				 <td>Data 3</td>
				 <td>Data 4</td>
			</tr>
	 </table>
</body>
</html>

CSS 表格 - 响应式表格

响应式表格是指根据不同的屏幕尺寸和分辨率调整和调整其布局和格式的表格。它确保表格在各种设备上易于阅读和访问。

CSS提供了一些功能，通过这些功能，我们可以使表格具有响应性。您可以使用属性 overflow-x： auto 在看不到屏幕较小且全部内容时向表格添加水平滚动条。

注意：您需要在 <table>> 元素周围添加一个容器元素，例如 <div，并使用属性 overflow-x： auto 来使表具有响应性。

让我们看一个例子：

注意：请调整屏幕大小以查看表格的响应能力。

<html>
<head>
<style>
	 table {
			border-collapse: collapse;
			width: 100%;
	 }
	 th, td {
			text-align: left;
			padding: 8px;
	 }
	 tr:nth-child(odd) {background-color: rgb(230,125,111);}
</style>
</head>
<body>
	 <h2>Responsive table</h2>
	 <div style="overflow-x: auto;">
			<table>
			<tr>
				 <th>Header</th>
				 <th>Header</th>
				 <th>Header</th>
				 <th>Header</th>
				 <th>Header</th>
				 <th>Header</th>
				 <th>Header</th>
				 <th>Header</th>
			</tr>
			<tr>
				 <td>Data 1</td>
				 <td>Data 2</td>
				 <td>Data 3</td>
				 <td>Data 4</td>
				 <td>Data 5</td>
				 <td>Data 6</td>
				 <td>Data 7</td>
				 <td>Data 8</td>
			</tr>
			<tr>
				 <td>Data 1</td>
				 <td>Data 2</td>
				 <td>Data 3</td>
				 <td>Data 4</td>
				 <td>Data 5</td>
				 <td>Data 6</td>
				 <td>Data 7</td>
				 <td>Data 8</td>
			</tr>
			<tr>
				 <td>Data 1</td>
				 <td>Data 2</td>
				 <td>Data 3</td>
				 <td>Data 4</td>
				 <td>Data 5</td>
				 <td>Data 6</td>
				 <td>Data 7</td>
				 <td>Data 8</td>
			</tr>
			<tr>
				 <td>Data 1</td>
				 <td>Data 2</td>
				 <td>Data 3</td>
				 <td>Data 4</td>
				 <td>Data 5</td>
				 <td>Data 6</td>
				 <td>Data 7</td>
				 <td>Data 8</td>
			</tr>
			</table>
	 </div>
</body>
</html>

CSS 表 - 相关属性

以下是用于设置表格样式的 CSS 属性列表：

属性 描述
border-collapse 设置表边框呈现算法。
border-spacing 使用单独的边框设置边框之间的间距。一个值分别设置垂直和水平间距，两个值分别设置水平和垂直间距。y.
caption-side 设置表格标题的位置。
empty-cells 使用单独的边框，隐藏表格中的空单元格。
table-layout 确定表呈现算法。
<< CSS - 链接 CSS - 边框（border ） >>