CSS 基础教程：表格（四）

hudson2022
71 阅读3分钟

CSS 基础教程：表格（四）

hudson 译 原文

CSS表格-其他样式

各种CSS属性可用于进一步样式化表格设计。例如，可以将填充、边距、分隔线等添加到表中。

让我们看看几个例子：

CSS表格-填充

为了向表格或其单元格添加填充，请使用属性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表格-边距

要添加表格或其单元格的边距，请使用属性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表格-分隔线（垂直/水平）

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

让我们看一个例子：

<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对于分隔的边框，设置边框之间的间距。一个值设置垂直和水平间距，两个值分别设置水平和垂直间距。
caption-side设置表格标题的位置。
empty-cells对于分隔的边框，隐藏表格中的空单元格。
table-layout确定表格渲染算法。
avatar
文章
阅读
粉丝