Css 简明教程
CSS - Tables
table 是一个 HTML 元素，用于以带行和列的结构化格式显示数据。它是使用 HTML 中的 <table> 标记创建的，并且可以使用 CSS 属性进行样式设置。
A table is an HTML element used to display data in a structured format with rows and columns. It is created using the <table> tag in HTML and can be styled using CSS properties.
本章讨论如何使用 CSS 来设置 HTML 表格的不同属性。
This chapter discusses how to set different properties of an HTML table using CSS.
我们看下面的一个示例，它展示了一个简单的 HTML 表格：
Let us see an example below which demonstrates a simple HTML table :
<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 属性 -
The table in the above example is a simple display of data and can be styled using CSS. You can set following CSS properties of a table −
-
The border-collapse specifies whether the browser should control the appearance of the adjacent borders that touch each other or whether each cell should maintain its style.
-
The border-spacing specifies the width that should appear between table cells.
-
The caption-side specifies where the table caption should be displayed (top or bottom).
-
The empty-cells specifies whether the border should be shown if a cell is empty.
-
The table-layout allows browsers to speed up layout of a table by using the first width properties it comes across for the rest of a column rather than having to load the whole table before rendering it.
-
The width and height properties set the height and width of a table.
-
The text-align property sets the horizontal alignment of the text content within table cells.
-
The border property can be used to set border to table and its cells.
-
The background-color property can be applied to the table itself, the table cells, or table rows.
-
The font-size, font-family, font-weight, *font-color*etc style the table font.
让我们在以下部分中，通过示例了解如何使用这些属性。
Let us see how to use these properties with examples in the following sections.
CSS Tables - Border Collapse
属性 border-collapse 确保表格单元格之间的边框缩小为一个边框，从而创造一个更简洁的外观。属性 border-collapse 可以具有值 collapse 或 separate (default) 。
The property border-collapse ensures that borders between table cells collapse into a single border, creating a cleaner look. Property border-collapse can have values collapse or separate (default).
以下示例仅向单元格和表格的主体添加边框 −
The following example only adds border to cells and body of table −
<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 ，看看它如何消除表格单元格之间的间距并导致边框重叠。
Now let us add border-collapse:collapse and see how this removes the spacing between the table cells and causes the borders to overlap.
<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 Tables - Border Spacing
border-spacing 属性指定表格中相邻单元格边框之间的距离。此属性可以指定为一个或两个值：
The border-spacing property specifies the distance that separates adjacent cells' borders in a table. This property may be specified as either one or two values.:
-
border-spacing: 2px;: If one value is passed, the spacing is applied to both vertical and horizontal borders.
-
border-spacing: 1cm 2em;: If two values are passed, the first value defines the horizontal spacing between cells (i.e., the space between cells in adjacent columns), and the second value defines the vertical spacing between cells (i.e., the space between cells in adjacent rows).
现在让我们修改前一个示例并查看效果 −
Now let’s modify the previous example and see the effect −
<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>以下示例演示上述要点：
Here is an example to demonstrate the above point:
<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 Tables - Caption Side
CSS 中的 caption-side 属性用于控制表格标题相对于表格的放置或对齐方式。
The caption-side property in CSS is used to control the placement or alignment of the table caption in relation to the table.
caption-side 属性可以具有以下值之一：
The caption-side property can have one of following values:
-
top: The caption placed above the table.
-
bottom: The caption placed below the table.
-
block-start: The caption box is positioned at the block start edge of the table.
-
block-end: The caption box sis positioned at the block end edge of the table.
-
inline-start: The caption box is positioned at the inline start edge of the table.
-
inline-end: The caption box is positioned at the inline end edge of the table.
-
inherit: The value is inherited from the caption-side property of the parent element.
我们看一个示例：
Let us see an example:
<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>CSS Tables - Empty Cells
CSS 中的 empty-cells 属性用于控制表格中没有内容或被认为是“空”的单元格的呈现。它仅适用于表格和表格单元格。
The empty-cells property in CSS is used to control the rendering of cells in a table that have no content or are otherwise considered "empty." It only applies to tables and table cells.
此属性可以具有以下两个值：
This property can have one of the two values:
-
show: It indicates that empty cells should be shown with borders and spacing as if they contained content. It is the default value.
-
hide: It indicates that empty cells should be hidden and not take up any space. Borders and spacing for empty cells will not be displayed, contributing to a more compact layout.
下面是 empty-cells 属性用于隐藏 <table> 元素中空单元格的边框。
Here is the empty-cells property used to hide borders of empty cells in the <table> element.
<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> 元素中空单元格的边框。
In the following example the empty-cells:show property is used to show borders of empty cells in the <table> element.
<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 Tables - Table Layout
table-layout 属性应该帮助你控制浏览器应如何呈现或布局表格。
The table-layout property is supposed to help you control how a browser should render or lay out a table.
此属性可以具有以下值：
This property can have one of the following values:
-
auto: When table-layout is set to auto, the browser will calculate the width of columns and cells based on their content.
-
fixed: When table-layout is set to fixed, the browser will allocate a fixed width to each column based on the first row of the table. This means that all subsequent rows will adhere to the same column widths, regardless of their content.
CSS Table - with fixed Layout
以下示例显示 table-layout: fixed 的用法：
The following example shows the use of 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 - with auto Layout
以下示例显示 table-layout: auto 的用法：
The following example shows the use of 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 Tables - Height and Width
为了设置表格的 height 和 width ，请使用以下属性：
In order to set the height and width of a table, use these properties:
<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 Tables - Table Alignment
在 CSS 中，用于对其进行对齐的各种属性如下：
In CSS the various properties that are applied to align them are as follow:
text-align
此属性设置单元格内文本内容的 horizontal 对齐（ <th> or <td> ）。它可以采用以下值：
This property sets the horizontal alignment of the text content within table cells (<th> or <td>). It can take following values:
-
left
-
right
-
center
-
justify
我们来看 text-align: center 的示例：
Let us see an example of 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 。
Similarly, to align the text to left or right use the property text-align: left or text-align: right, respectively.
text-align: justify 值确保文本在每个单元格的左右两侧对齐，从而创建干净且有条理的外观。
The value text-align: justify ensures that text is aligned both on the left and right sides of each cell, creating a clean and organized appearance.
CSS Tables - vertical-align
属性 vertical-align 设置内容在 <th> 或 <td> 中的垂直对齐方式。
The property vertical-align sets the vertical alignment of content in <th> or <td>.
它可以采用以下值：
It can take following values:
-
top
-
middle
-
bottom
我们来看一个示例，将垂直对齐方式设置为 top ：
Let us see an example for setting the vertical-alignment to top:
<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 Tables - Border
在 CSS 中，有几个边框属性可以应用到表格：
In CSS, there are several border properties that can be applied to a table:
-
border: This property sets the width, style, and color of all four sides of the table border (e.g., border: 1px solid black;).
-
border-collapse: This property sets whether the border should be collapsed into a single border or separated between cells.
-
border-width: This property sets the width of the border (e.g., border-width: thin|medium|thick|2px;)
-
border-style: This property sets the style of table border (e.g., border-style: dotted|dashed|solid|double;), etc.
-
border-color: This property sets the color of table border (e.g., (border-color: red;) or (border-top-color: red;)).
-
border-radius: This property rounds the corners of the table border (e.g., border-radius: 5px|50%).
我们来看一个设置表格边框的示例：
Let us see an example for setting up the border of a table:
<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 Tables - Background color
background-color 属性可应用于表格本身、表格单元格或表格行。
The background-color property can be applied to the table itself, the table cells, or table rows.
为了设置背景颜色，使用以下代码：
In order to set the background color use the following code:
/* 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;
}我们看一个示例：
Let us see an example:
<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 Tables - Font styles
可以使用字体相关属性（例如 font-size, font-family, font-weight 等）对在 <th> 和 <td> 元素上的表格内容字体进行样式化。
The font of the content of a table can be styled using the font-related properties, such as font-size, font-family, font-weight, etc. on the <th> and <td> elements.
<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 Tables - Other Styles
可以使用各种 CSS 属性进一步设置表格设计样式。例如，可以为表格添加内边距、外边距、分隔符等。
Various CSS properties are available to style the table design further. For example, you can add padding, margin, dividers, etc. to a table.
我们来看几个示例：
Let us see few examples:
CSS Tables - Padding
若要为表格或其单元格添加内边距，请使用属性 padding 。请参阅以下示例：
In order to add padding to the table or its cells, use the property padding. Refer the example below:
<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 Tables - Margin
若要为表格或其单元格添加外边距，请使用属性 margin 。请参阅以下示例：
In order to add the margin of table or its cells, use the property margin. Refer the following example:
<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 Tables - Table Dividers (vertical / horizontal)
若要添加垂直或水平分隔线，您可以向 <th> 和 <th> 元素添加属性 border-right 或 border-bottom 。
In order to add vertical or horizontal dividers, you can add the property border-right or border-bottom to the <th> and <th> elements.
我们看一个示例：
Let us see an example:
<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 Tables - Striped Table
为了使表格看起来有条纹，其中交替行着色，您可以使用 nth-child() selector 并为表格的所有奇数/偶数行添加背景色。
In order to make the table look striped, where alternative rows are colored, you can use the nth-child() selector and add a background-color, to all the odds / even rows of the table.
我们看一个示例：
Let us see an example:
<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 Tables - Responsive Table
自适应表格是指根据不同的屏幕尺寸和分辨率调整和适应其布局和格式的表格。它确保表格在各种设备上易于读取和访问。
Responsive table refers to a table that adjusts and adapts its layout and formatting based on different screen sizes and resolutions. It ensures that the table is easily readable and accessible on various devices.
CSS 提供可帮助我们制作自适应表格的功能。您可以使用属性 overflow-x: auto 在屏幕较小且无法看到全部内容时向表格中添加水平滚动条。
CSS provides features through which we can make a table responsive. You can use the property overflow-x: auto to add a horizontal scroll bar to the table, when screen in small and entire content is not seen.
我们看一个示例：
Let us see an example:
注意：请调整您的屏幕大小以查看表格的自适应性。
Note: Kindly resize your screen to see the responsiveness of the table.
<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 Table - Related Properties
以下是用于设置表格样式的 CSS 属性列表：
Following is the list of CSS properties for styling tables:
Property |
Description |
Sets the table border rendering algorithm. |
|
With separate borders set the spacing between borders. One value sets vertical and horizontal spacing and two values sets horizontal and vertical spacing respectively. |
|
Sets the position for a table caption. |
|
With separate borders, hides empty cells in a table. |
|
Determines the table-rendering algorithm. |