参考手册
CSS 教程
CSS 列表
CSS 显示

CSS 表格

使用 CSS 可以极大地改善 HTML 表格的外观：

公司 联系人 地址 城市
阿里巴巴 马云 滨江区网商路699号 杭州市
苹果 库克 1 Infinite Loop Cupertino, CA 95014 丘珀蒂诺
百度 李彦宏 北四环西路58号丽香国际大厦 北京市
华为 任正非 龙岗区莆田华为基地 深圳市
腾讯 马化腾 南山区高新区腾讯大厦 深圳市
小米 雷军 北京市海淀区安宁庄路小米科技园 北京市
字节跳动 张一鸣 北三环西路43号中航广场1号楼 北京市

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. #customers {
  6.   font-family: Arial, Helvetica, sans-serif;
  7.   border-collapse: collapse;
  8.   width: 100%;
  9. }
  11. #customers td, #customers th {
  12.   border: 1px solid #ddd;
  13.   padding: 8px;
  14. }
  16. #customers tr:nth-child(even){background-color: #f2f2f2;}
  18. #customers tr:hover {background-color: #ddd;}
  20. #customers th {
  21.   padding-top: 12px;
  22.   padding-bottom: 12px;
  23.   text-align: left;
  24.   background-color: #4CAF50;
  25.   color: white;
  26. }
  27. </style>
  28. </head>
  29. <body>
  30. <table id="customers">
  31.     <tr>
  32.         <th>公司</th>
  33.         <th>联系人</th>
  34.         <th>地址</th>
  35.         <th>城市</th>
  36.     </tr>
  37.     <tr>
  38.         <td>阿里巴巴</td>
  39.         <td>马云</td>
  40.         <td>滨江区网商路699号</td>
  41.         <td>杭州市</td>
  42.     </tr>
  43.     <tr>
  44.         <td>苹果</td>
  45.         <td>库克</td>
  46.         <td>1 Infinite Loop Cupertino, CA 95014</td>
  47.         <td>丘珀蒂诺</td>
  48.     </tr>
  49.     <tr>
  50.         <td>百度</td>
  51.         <td>李彦宏</td>
  52.         <td>北四环西路58号丽香国际大厦</td>
  53.         <td>北京市</td>
  54.     </tr>
  55.     <tr>
  56.         <td>华为</td>
  57.         <td>任正非</td>
  58.         <td>龙岗区莆田华为基地</td>
  59.         <td>深圳市</td>
  60.     </tr>
  61.     <tr>
  62.         <td>腾讯</td>
  63.         <td>马化腾</td>
  64.         <td>南山区高新区腾讯大厦</td>
  65.         <td>深圳市</td>
  66.     </tr>
  67.     <tr>
  68.         <td>小米</td>
  69.         <td>雷军</td>
  70.         <td>北京市海淀区安宁庄路小米科技园</td>
  71.         <td>北京市</td>
  72.     </tr>
  73.     <tr>
  74.         <td>字节跳动</td>
  75.         <td>张一鸣</td>
  76.         <td>北三环西路43号中航广场1号楼</td>
  77.         <td>北京市</td>
  78.     </tr>
  79. </table>
  80. </body>
  81. </html>
运行一下

表格边框

如需在 CSS 中设置表格边框，请使用 border 属性。

下例为 <table>、<th> 和 <td> 元素规定了黑色边框：

姓氏名称
埃隆马斯克
马克扎克伯格
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h1>XMLHttpRequest 对象</h1>
  7. <p id="demo">让 AJAX 改变这段文本。</p>
  9. <button type="button" onclick="loadDoc()">更改内容</button>
  11. <script>
  12. function loadDoc() {
  13.   var xhttp = new XMLHttpRequest();
  14.   xhttp.onreadystatechange = function() {
  15.     if (this.readyState == 4 && this.status == 200) {
  16.       document.getElementById("demo").innerHTML = this.responseText;
  17.     }
  18.   };
  19.   xhttp.open("GET", "/example/js/ajax_info.txt", true);
  20.   xhttp.send();
  21. }
  22. </script>
  24. </body>
  25. </html>
运行一下

注意：上例中的表格拥有双边框。这是因为 table 和 <th> 和 <td> 元素都有单独的边框。

全宽表格

在某些情况下，上表似乎很小。如果您需要一个可以覆盖整个屏幕（全宽）的表格，请为 <table> 元素添加 width: 100%：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. table, th, td {
  6.   border: 1px solid black;
  7. }
  9. table {
  10.   width: 100%;
  11. }
  12. </style>
  13. </head>
  14. <body>
  16. <h1>全宽表格</h1>
  18. <table>
  19.   <tr>
  20.     <th>姓氏</th>
  21.     <th>名称</th>
  22.   </tr>
  23.   <tr>
  24.     <td>埃隆</td>
  25.     <td>马斯克</td>
  26.   </tr>
  27.   <tr>
  28.     <td>马克</td>
  29.     <td>扎克伯格</td>
  30.   </tr>
  31. </table>
  33. </body>
  34. </html>
运行一下
双边框

请注意上面的表格有双边框。这是因为表格和 th、td 元素都有单独的边框。

如需删除双边框，请看下面的例子。

合并表格边框

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

姓氏名称
埃隆马斯克
马克扎克伯格
实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. table, td, th {
  6.   border: 1px solid black;
  7. }
  9. table {
  10.   width: 100%;
  11.   border-collapse: collapse;
  12. }
  13. </style>
  14. </head>
  15. <body>
  17. <h1>让边框重合</h1>
  19. <table>
  20.   <tr>
  21.     <th>姓氏</th>
  22.     <th>名称</th>
  23.   </tr>
  24.   <tr>
  25.     <td>埃隆</td>
  26.     <td>马斯克</td>
  27.   </tr>
  28.   <tr>
  29.     <td>马克</td>
  30.     <td>扎克伯格</td>
  31.   </tr>
  32. </table>
  34. </body>
  35. </html>
运行一下

如果只希望表格周围有边框，则仅需为 <table> 指定 border 属性：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. table {
  6.   width: 100%;
  7.   border-collapse: collapse;
  8.   border: 1px solid black;
  9. }
  10. </style>
  11. </head>
  12. <body>
  14. <h1>单边框表格</h1>
  16. <table>
  17.   <tr>
  18.     <th>姓氏</th>
  19.     <th>名称</th>
  20.   </tr>
  21.   <tr>
  22.     <td>埃隆</td>
  23.     <td>马斯克</td>
  24.   </tr>
  25.   <tr>
  26.     <td>马克</td>
  27.     <td>扎克伯格</td>
  28.   </tr>
  29. </table>
  31. </body>
  32. </html>
运行一下

表格宽度和高度

表格的宽度和高度由 width 和 height 属性定义。

下例将表的宽度设置为 100％，将 <th> 元素的高度设置为 50px：

姓氏名称结余
埃隆马斯克$100
马克扎克伯格$150
比尔盖茨$300
实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. table, td, th {
  6.   border: 1px solid black;
  7. }
  9. table {
  10.   border-collapse: collapse;
  11.   width: 100%;
  12. }
  14. th {
  15.   height: 70px;
  16. }
  17. </style>
  18. </head>
  19. <body>
  21. <h1>width 和 height 属性</h1>
  22. <p>设置表格的宽度，以及表格标题行的高度：</p>
  24. <table>
  25.   <tr>
  26.     <th>姓氏</th>
  27.     <th>名称</th>
  28.     <th>结余</th>
  29.   </tr>
  30.   <tr>
  31.     <td>埃隆</td>
  32.     <td>马斯克</td>
  33.     <td>$100</td>
  34.   </tr>
  35.   <tr>
  36.     <td>马克</td>
  37.     <td>扎克伯格</td>
  38.     <td>$150</td>
  39.   </tr>
  40.   <tr>
  41.     <td>比尔</td>
  42.     <td>盖茨</td>
  43.     <td>$300</td>
  44.   </tr>
  45. </table>
  47. </body>
  48. </html>
运行一下

要创建仅占页面一半的表，请使用 width: 50%：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. table, td, th {
  6.   border: 1px solid black;
  7. }
  9. table {
  10.   border-collapse: collapse;
  11.   width: 50%;
  12. }
  14. th {
  15.   height: 70px;
  16. }
  17. </style>
  18. </head>
  19. <body>
  21. <h1>width 和 height 属性</h1>
  22. <p>设置表格的宽度，以及表格标题行的高度：</p>
  24. <table>
  25.   <tr>
  26.     <th>姓氏</th>
  27.     <th>名称</th>
  28.     <th>结余</th>
  29.   </tr>
  30.   <tr>
  31.     <td>埃隆</td>
  32.     <td>马斯克</td>
  33.     <td>$100</td>
  34.   </tr>
  35.   <tr>
  36.     <td>马克</td>
  37.     <td>扎克伯格</td>
  38.     <td>$150</td>
  39.   </tr>
  40.   <tr>
  41.     <td>比尔</td>
  42.     <td>盖茨</td>
  43.     <td>$300</td>
  44.   </tr>
  45. </table>
  47. </body>
  48. </html>
运行一下

水平对齐

text-align 属性设置 <th> 或 <td> 中内容的水平对齐方式（左、右或居中）。

默认情况下，<th> 元素的内容居中对齐，而 <td> 元素的内容左对齐。

要使 <td> 元素的内容也居中对齐，请使用 text-align: center：

姓氏名称结余
埃隆马斯克$100
马克扎克伯格$150
比尔盖茨$300
实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. table, td, th {
  6.   border: 1px solid black;
  7. }
  9. table {
  10.   border-collapse: collapse;
  11.   width: 100%;
  12. }
  14. td {
  15.   text-align: center;
  16. }
  17. </style>
  18. </head>
  19. <body>
  21. <h1>text-align 属性</h1>
  22. <p>这个属性设置 th 或 td 中内容的水平对齐方式（左、右、或居中）。</p>
  24. <table>
  25.   <tr>
  26.     <th>姓氏</th>
  27.     <th>名称</th>
  28.     <th>结余</th>
  29.   </tr>
  30.   <tr>
  31.     <td>埃隆</td>
  32.     <td>马斯克</td>
  33.     <td>$100</td>
  34.   </tr>
  35.   <tr>
  36.     <td>马克</td>
  37.     <td>扎克伯格</td>
  38.     <td>$150</td>
  39.   </tr>
  40.   <tr>
  41.     <td>比尔</td>
  42.     <td>盖茨</td>
  43.     <td>$300</td>
  44.   </tr>
  45. </table>
  47. </body>
  48. </html>
运行一下

下例使 <th> 元素中的文本左对齐：

姓氏名称结余
埃隆马斯克$100
马克扎克伯格$150
比尔盖茨$300
实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. table, td, th {
  6.   border: 1px solid black;
  7. }
  9. table {
  10.   border-collapse: collapse;
  11.   width: 100%;
  12. }
  14. th {
  15.   text-align: left;
  16. }
  17. </style>
  18. </head>
  19. <body>
  21. <h1>text-align 属性</h1>
  23. <p>这个属性设置 th 或 td 中内容的水平对齐方式（比如左、右或居中对齐）。</p>
  25. <table>
  26.   <tr>
  27.     <th>姓氏</th>
  28.     <th>名称</th>
  29.     <th>结余</th>
  30.   </tr>
  31.   <tr>
  32.     <td>埃隆</td>
  33.     <td>马斯克</td>
  34.     <td>$100</td>
  35.   </tr>
  36.   <tr>
  37.     <td>马克</td>
  38.     <td>扎克伯格</td>
  39.     <td>$150</td>
  40.   </tr>
  41.   <tr>
  42.     <td>比尔</td>
  43.     <td>盖茨</td>
  44.     <td>$300</td>
  45.   </tr>
  46. </table>
  48. </body>
  49. </html>
运行一下

垂直对齐

vertical-align 属性设置 <th> 或 <td> 中内容的垂直对齐方式（上、下或居中）。默认情况下，表中内容的垂直对齐是居中（<th> 和 <td> 元素都是）。下例将 <td> 元素的垂直文本对齐方式设置为下对齐：

姓氏名称结余
埃隆马斯克$100
马克扎克伯格$150
比尔盖茨$300
实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. table, td, th {
  6.   border: 1px solid black;
  7. }
  9. table {
  10.   border-collapse: collapse;
  11.   width: 100%;
  12. }
  14. td {
  15.   height: 50px;
  16.   vertical-align: bottom;
  17. }
  18. </style>
  19. </head>
  20. <body>
  22. <h1>vertical-align 属性</h1>
  23. <p>这个属性设置 th 或 td 中内容的垂直对齐方式（比如上、下或居中对齐）。</p>
  25. <table>
  26.   <tr>
  27.     <th>姓氏</th>
  28.     <th>名称</th>
  29.     <th>结余</th>
  30.   </tr>
  31.   <tr>
  32.     <td>埃隆</td>
  33.     <td>马斯克</td>
  34.     <td>$100</td>
  35.   </tr>
  36.   <tr>
  37.     <td>马克</td>
  38.     <td>扎克伯格</td>
  39.     <td>$150</td>
  40.   </tr>
  41.   <tr>
  42.     <td>比尔</td>
  43.     <td>盖茨</td>
  44.     <td>$300</td>
  45.   </tr>
  46. </table>
  48. </body>
  49. </html>
运行一下

表格内边距

如需控制边框和表格内容之间的间距，请在 <td> 和 <th> 元素上使用 padding 属性：

姓氏名称结余
埃隆马斯克$100
马克扎克伯格$150
比尔盖茨$300
实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. table, td, th {
  6.   border: 1px solid #ddd;
  7.   text-align: left;
  8. }
  10. table {
  11.   border-collapse: collapse;
  12.   width: 100%;
  13. }
  15. th, td {
  16.   padding: 15px;
  17. }
  18. </style>
  19. </head>
  20. <body>
  22. <h1>padding 属性</h1>
  23. <p>这个属性在表格的内容与边框之间添加空间。</p>
  25. <table>
  26.   <tr>
  27.     <th>姓氏</th>
  28.     <th>名称</th>
  29.     <th>结余</th>
  30.   </tr>
  31.   <tr>
  32.     <td>埃隆</td>
  33.     <td>马斯克</td>
  34.     <td>$100</td>
  35.   </tr>
  36.   <tr>
  37.     <td>马克</td>
  38.     <td>扎克伯格</td>
  39.     <td>$150</td>
  40.   </tr>
  41.   <tr>
  42.     <td>比尔</td>
  43.     <td>盖茨</td>
  44.     <td>$300</td>
  45.   </tr>
  46. </table>
  48. </body>
  49. </html>
运行一下

水平分隔线

姓氏名称结余
埃隆马斯克$100
马克扎克伯格$150
比尔盖茨$300

向 <th> 和 <td> 添加 border-bottom 属性，以实现水平分隔线：

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. table {
  6.   border-collapse: collapse;
  7.   width: 100%;
  8. }
  10. th, td {
  11.   padding: 8px;
  12.   text-align: left;
  13.   border-bottom: 1px solid #ddd;
  14. }
  15. </style>
  16. </head>
  17. <body>
  19. <h1>表格分隔线</h1>
  21. <p>为 th 和 td 添加 border-bottom，已实现水平分隔线：</p>
  23. <table>
  24.   <tr>
  25.     <th>姓氏</th>
  26.     <th>名称</th>
  27.     <th>结余</th>
  28.   </tr>
  29.   <tr>
  30.     <td>埃隆</td>
  31.     <td>马斯克</td>
  32.     <td>$100</td>
  33.   </tr>
  34.   <tr>
  35.     <td>马克</td>
  36.     <td>扎克伯格</td>
  37.     <td>$150</td>
  38.   </tr>
  39.   <tr>
  40.     <td>比尔</td>
  41.     <td>盖茨</td>
  42.     <td>$300</td>
  43.   </tr>
  44. </table>
  46. </body>
  47. </html>
运行一下

可悬停表格

在 <tr> 元素上使用 :hover 选择器，以突出显示鼠标悬停时的表格行：

姓氏名称结余
埃隆马斯克$100
马克扎克伯格$150
比尔盖茨$300
实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. table {
  6.   border-collapse: collapse;
  7.   width: 100%;
  8. }
  10. th, td {
  11.   padding: 8px;
  12.   text-align: left;
  13.   border-bottom: 1px solid #ddd;
  14. }
  16. tr:hover {background-color:#f5f5f5;}
  17. </style>
  18. </head>
  19. <body>
  21. <h1>可悬停表格</h1>
  22. <p>将鼠标移到表格行上可以查看效果。</p>
  24. <table>
  25.   <tr>
  26.     <th>姓氏</th>
  27.     <th>名称</th>
  28.     <th>结余</th>
  29.   </tr>
  30.   <tr>
  31.     <td>埃隆</td>
  32.     <td>马斯克</td>
  33.     <td>$100</td>
  34.   </tr>
  35.   <tr>
  36.     <td>马克</td>
  37.     <td>扎克伯格</td>
  38.     <td>$150</td>
  39.   </tr>
  40.   <tr>
  41.     <td>比尔</td>
  42.     <td>盖茨</td>
  43.     <td>$300</td>
  44.   </tr>
  45. </table>
  47. </body>
  48. </html>
运行一下

条状表格

姓氏名称结余
埃隆马斯克$100
马克扎克伯格$150
比尔盖茨$300

为了实现斑马纹表格效果，请使用 nth-child() 选择器，并为所有偶数（或奇数）表行添加 background-color：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. table {
  6.   border-collapse: collapse;
  7.   width: 100%;
  8. }
  10. th, td {
  11.   text-align: left;
  12.   padding: 8px;
  13. }
  15. tr:nth-child(even) {background-color: #f2f2f2;}
  16. </style>
  17. </head>
  18. <body>
  20. <h1>条纹表格</h1>
  21. <p>为了实现斑马纹表格效果，请使用 nth-child() 选择器，并为所有偶数（或奇数）表行添加背景色：</p>
  23. <table>
  24.   <tr>
  25.     <th>姓氏</th>
  26.     <th>名称</th>
  27.     <th>结余</th>
  28.   </tr>
  29.   <tr>
  30.     <td>埃隆</td>
  31.     <td>马斯克</td>
  32.     <td>$100</td>
  33.   </tr>
  34.   <tr>
  35.     <td>马克</td>
  36.     <td>扎克伯格</td>
  37.     <td>$150</td>
  38.   </tr>
  39.   <tr>
  40.     <td>比尔</td>
  41.     <td>盖茨</td>
  42.     <td>$300</td>
  43.   </tr>
  44. </table>
  46. </body>
  47. </html>
运行一下

表格颜色

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

姓氏名称结余
埃隆马斯克$100
马克扎克伯格$150
比尔盖茨$300
实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. table {
  6.   border-collapse: collapse;
  7.   width: 100%;
  8. }
  10. th, td {
  11.   text-align: left;
  12.   padding: 8px;
  13. }
  15. tr:nth-child(even){background-color: #f2f2f2}
  17. th {
  18.   background-color: #4CAF50;
  19.   color: white;
  20. }
  21. </style>
  22. </head>
  23. <body>
  25. <h1>有颜色的表格标题</h1>
  27. <table>
  28.   <tr>
  29.     <th>姓氏</th>
  30.     <th>名称</th>
  31.     <th>结余</th>
  32.   </tr>
  33.   <tr>
  34.     <td>埃隆</td>
  35.     <td>马斯克</td>
  36.     <td>$100</td>
  37.   </tr>
  38.   <tr>
  39.     <td>马克</td>
  40.     <td>扎克伯格</td>
  41.     <td>$150</td>
  42.   </tr>
  43.   <tr>
  44.     <td>比尔</td>
  45.     <td>盖茨</td>
  46.     <td>$300</td>
  47.   </tr>
  48. </table>
  50. </body>
  51. </html>
运行一下

响应式表格

如果屏幕太小而无法显示全部内容，则响应式表格会显示水平滚动条。

在 <table> 元素周围添加带有 overflow-x:auto 的容器元素（例如 <div>），以实现响应式效果：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. table {
  6.   border-collapse: collapse;
  7.   width: 100%;
  8. }
  10. th, td {
  11.   text-align: left;
  12.   padding: 8px;
  13. }
  15. tr:nth-child(even) {background-color: #f2f2f2;}
  16. </style>
  17. </head>
  18. <body>
  20. <h1>响应式表格</h1>
  21. <p>如果屏幕太小无法显示全部内容，响应表将显示水平滚动条。请调整浏览器窗口的大小以查看效果：</p>
  22. <p>如需创建响应式表格，请用 <strong>overflow-x:auto</strong> 的容器元素（比如 div）包围表格元素：</p>
  24. <div style="overflow-x:auto;">
  25.   <table>
  26.     <tr>
  27.       <th>First Name</th>
  28.       <th>Last Name</th>
  29.       <th>Points</th>
  30.       <th>Points</th>
  31.       <th>Points</th>
  32.       <th>Points</th>
  33.       <th>Points</th>
  34.       <th>Points</th>
  35.       <th>Points</th>
  36.       <th>Points</th>
  37.       <th>Points</th>
  38.       <th>Points</th>
  39.     </tr>
  40.     <tr>
  41.       <td>Bill</td>
  42.       <td>Gates</td>
  43.       <td>50</td>
  44.       <td>50</td>
  45.       <td>50</td>
  46.       <td>50</td>
  47.       <td>50</td>
  48.       <td>50</td>
  49.       <td>50</td>
  50.       <td>50</td>
  51.       <td>50</td>
  52.       <td>50</td>
  53.     </tr>
  54.     <tr>
  55.       <td>Steve</td>
  56.       <td>Jobs</td>
  57.       <td>94</td>
  58.       <td>94</td>
  59.       <td>94</td>
  60.       <td>94</td>
  61.       <td>94</td>
  62.       <td>94</td>
  63.       <td>94</td>
  64.       <td>94</td>
  65.       <td>94</td>
  66.       <td>94</td>
  67.     </tr>
  68.     <tr>
  69.       <td>Elon</td>
  70.       <td>Musk</td>
  71.       <td>67</td>
  72.       <td>67</td>
  73.       <td>67</td>
  74.       <td>67</td>
  75.       <td>67</td>
  76.       <td>67</td>
  77.       <td>67</td>
  78.       <td>67</td>
  79.       <td>67</td>
  80.       <td>67</td>
  81.     </tr>
  82.   </table>
  83. </div>
  85. </body>
  86. </html>
运行一下

注释：在 OS X Lion（在 Mac 上）中，滚动条默认情况下是隐藏的，并且仅在使用时显示（即使设置了 "overflow:scroll"）。

CSS 表格属性

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

分类导航

HTMLHTML5JAVASCRIPTCSSjQueryBootstrap 3 教程SassReactHTMl 颜色教程JSONXMLXPathTypeScriptAppML 教程XLinkXPointerXQueryXFormsXsltXML SchemaXSL-FOWeb ServiceWSDSOAPW3CSVGDHTMLTCP/IPjQuery Mobile 教程XHTML