CSS 表格

表边框

要在CSS中指定表格边框，请使用border属性。下面的示例为<table>，<th>和>td>元素指定了黑色边框：

<table>
           <tr>
               <th>姓氏</th>
               <th>名字</th>
           </tr>
           <tr>
               <td>张</td>
               <td>三</td>
           </tr>
           <tr>
               <td>李</td>
               <td>四</td>
           </tr>
       </table>

尝试一下

请注意，上例中的表具有双边框。这是因为表和<th>和<td>元素都有单独的边框。

折叠表边框

border-collapse属性设置是否应将表格边框折叠为单个边框：

table {
             border-collapse: collapse;
           }

           table, td, th {
             border: 1px solid black;
           }

尝试一下

如果您只想要围绕表格的边框，只需指定<table>的border属性：

table {
             border-collapse: collapse;
             border: 1px solid black;
           }

尝试一下

表宽度和高度

表的宽度和高度由width和height属性定义。下面的示例将表的宽度设置为100％，将<th>元素的高度设置为50px：

table, td, th {
             border: 1px solid black;
           }

           table {
             border-collapse: collapse;
             width: 100%;
           }

           th {
             height: 50px;
           }

尝试一下

水平对齐

text-align属性设置<th>或<td>中内容的水平对齐（如左，右或中心）。默认情况下，<th>元素的内容是居中对齐的，<td>元素的内容是左对齐的。以下示例左对齐<th>元素中的文本：

table, td, th {
             border: 1px solid black;
           }

           table {
             border-collapse: collapse;
             width: 100%;
           }

           th {
             text-align: left;
           }

尝试一下

垂直对齐

vertical-align属性设置<th>或<td>中内容的垂直对齐方式（如顶部，底部或中间）。默认情况下，表中内容的垂直对齐方式是中间的（对于<th>和<td>元素）。以下示例将<td>元素的垂直文本对齐方式设置为底部：

table, td, th {
             border: 1px solid black;
           }

           table {
             border-collapse: collapse;
             width: 100%;
           }

           td {
             height: 50px;
             vertical-align: bottom;
           }

尝试一下

表填充

要控制边框与表中内容之间的空间，请使用<td>和<th>元素上的padding属性：

table, td, th {  
             border: 1px solid #ddd;
             text-align: left;
           }

           table {
             border-collapse: collapse;
             width: 100%;
           }

           th, td {
             padding: 15px;
           }

尝试一下

水平分隔线

border-bottom属性添加到<th>和<td>以获取水平分隔符：

ol {
             background: #ff9999;
             padding: 20px;
           }

           ul {
             background: #3399ff;
             padding: 20px;
           }

           ol li {
             background: #ffe5e5;
             padding: 5px;
             margin-left: 35px;
           }

           ul li {
             background: #cce5ff;
             margin: 5px;
           }

尝试一下

可悬停表

<tr>上使用:hover的选择器突出显示鼠标上的表行：

ol {
             background: #ff9999;
             padding: 20px;
           }

           ul {
             background: #3399ff;
             padding: 20px;
           }

           ol li {
             background: #ffe5e5;
             padding: 5px;
             margin-left: 35px;
           }

           ul li {
             background: #cce5ff;
             margin: 5px;
           }

尝试一下

条纹表

对于斑马条纹表，使用nth-child()选择器，并为所有偶数(或奇数)表行添加background-color:

table {
             border-collapse: collapse;
             width: 100%;
           }

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

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

尝试一下

表颜色

以下示例指定<th>元素的背景颜色和文本颜色：

table {
             border-collapse: collapse;
             width: 100%;
           }

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

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

           th {
             background-color: #4CAF50;
             color: white;
           }

尝试一下

响应表

如果屏幕太小而无法显示完整内容，则响应表将显示水平滚动条：overflow-x:auto在<table>元素周围添加一个容器元素（如<div>）以使其响应：

table {
             border-collapse: collapse;
             width: 100%;
           }

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

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

尝试一下

注意：在OS X Lion（在Mac上），默认情况下隐藏滚动条，仅在使用时显示（即使设置了“overflow：scroll”）。

所有CSS表格属性

属性	描述
border	在一个声明中设置所有边界属性
border-collapse	指定是否应该折叠表边界
border-spacing	指定相邻单元格边界之间的距离
caption-side	指定表标题的位置
empty-cells	指定是否在表中的空单元格上显示边框和背景
table-layout	设置要用于表的布局算法

表边框

折叠表边框

表宽度和高度

水平对齐

垂直对齐

表填充

水平分隔线

可悬停表

条纹表

表颜色

响应表

所有CSS表格属性

相关页面