Css 简明教程

CSS - Tables

table 是一个 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 Tables - Border Collapse

属性 border-collapse 确保表格单元格之间的边框缩小为一个边框，从而创造一个更简洁的外观。属性 border-collapse 可以具有值 collapse 或 separate (default) 。

以下示例仅向单元格和表格的主体添加边框 −

<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 Tables - Border Spacing

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>

以下示例演示上述要点：

<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 属性用于控制表格标题相对于表格的放置或对齐方式。

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

top ：标题放在表格上方。
bottom ：标题放在表格下方。
block-start ：标题框定位在表格的块开始边上。
block-end ：标题框定位在表格的块结束边上。
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>

CSS Tables - Empty Cells

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

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

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

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

<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 Tables - Table Layout

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

此属性可以具有以下值：

auto ：当 table-layout 设置为 auto 时，浏览器会根据内容计算列和单元格的宽度。
fixed ：当 table-layout 设置为 fixed 时，浏览器会根据表的首行，为每一列分配一个固定宽度。这意味着所有后续行都将遵循相同的列宽，而不管其内容如何。

CSS Table - with fixed Layout

以下示例显示 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 的用法：

<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 ，请使用以下属性：

<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 中，用于对其进行对齐的各种属性如下：

text-align

此属性设置单元格内文本内容的 horizontal 对齐（ <th> or <td> ）。它可以采用以下值：

left
right
center
justify

我们来看 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 Tables - vertical-align

属性 vertical-align 设置内容在 <th> 或 <td> 中的垂直对齐方式。

它可以采用以下值：

top
middle
bottom

我们来看一个示例，将垂直对齐方式设置为 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 中，有几个边框属性可以应用到表格：

border ：此属性设置表格边框（例如：border: 1px solid black;）所有四边的宽度、样式和颜色。
border-collapse ：此属性设置边框是否应合并为单个边框或在单元格之间分隔。
border-width : 此属性设置边框的宽度（例如：border-width: thin|medium|thick|2px;）
border-style ：此属性设置表格边框的样式（例如：border-style: dotted|dashed|solid|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 Tables - Background color

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 Tables - Font styles

可以使用字体相关属性（例如 font-size, font-family, font-weight 等）对在 <th> 和 <td> 元素上的表格内容字体进行样式化。

<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 属性进一步设置表格设计样式。例如，可以为表格添加内边距、外边距、分隔符等。

我们来看几个示例：

CSS Tables - Padding

若要为表格或其单元格添加内边距，请使用属性 padding 。请参阅以下示例：

<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 。请参阅以下示例：

<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 。

我们看一个示例：

<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 并为表格的所有奇数/偶数行添加背景色。

我们看一个示例：

<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

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

CSS 提供可帮助我们制作自适应表格的功能。您可以使用属性 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 Table - Related Properties

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

Property

Description

border-collapse

设置表格边框渲染算法。

border-spacing

通过单独的边框设置边框之间的间距。一个值设置垂直和水平间距，两个值分别设置水平和垂直间距。

caption-side

设置表格标题的位置。

empty-cells

通过单独的边框，隐藏表格中的空单元格。

table-layout

Determines the table-rendering algorithm.