技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营
卡卡网是专业的网站测速平台，网速测试，测试网站速度，就来卡卡网 ~
问题反馈网络日志

●【DiyVM】沙田机房/香港云/回国CN2线路/AMD EPYC/39元一月●5M/CN2海外云主机 24元/月●BGP+CN2海外云 低至25元/月●海外主机 低至$2/月

DiyVM：香港VPS惊爆价36元一月
★站长变现★特色悬浮小图标广告
5M CN2 GIA云主机 24元起
【转化好产品，官方高价收量】
一一一云主机 26元起一一一
官方高价收量，每日稳定结算

一一云主机 24元 3折起一一
AWS核心代理U充值 免注册开户
海外CN2云 低至$2.5/月
海外云低至2折 298/年
免费测试★APK免杀 谷歌过保护
官方收量CPA/CPS长期稳定

海外主机 5M CN2 低至$2/月
恒创科技 一 海外服务器 ● 高速稳定
★解决安装报毒★谷歌过保护机制
CN2 GIA/1000Mbps $111/月
超级签★免杀★加固★满意付款
全球云主机 3天试用再买

【菠萝云】香港4G内存99元,马上开通
亿人互联-津/京BGP托管租用/VPS
苹果签名/APP封装/远控免杀
10M CN2海外云VPS 53元/月
一一站长/主播好变现一一有流量就来
站长变现 特色悬浮小图标广告

实力产品变现
实力产品变现
实力产品变现
实力产品变现
实力产品变现
实力产品变现

赞助商

分类目录

赞助商

最新文章
详细介绍字体单位：em、ex、ch、rem等
字体单位是相对测量单位，是根据其他一些值计算的，可以动态变化。与字体相关的测量单...
11个示例详细介绍SVG stroke形状属性及如何用其制作动画
stroke-width设置形状的描边粗细，如果在 HTML 中，框架是从外边缘...
9款用SVG蒙版制作的图片转场/过渡动画（含教程）
本文给大家介绍10款用SVG蒙版制作的图片转场/过渡动画，并分析如何实现它们。
filter和backdrop-filter属性10大参数使用说明：blur()，drop-shadow()，opacity()等
CSS 数据类型<filter-function>代表可以改变输入图...
box-shadow最详细介绍：语法、参数、示例
CSS box-shadow 属性用于在元素的框架上添加阴影效果。你可以在同一个...
drop-shadow() 语法、参数、示例、详解
drop-shadow() 是一个CSS 过滤器函数，其将投影效果应用于输入图像...
SVG实现的网页气泡动画效果
本文给大家介绍一个SVG实现的网页气泡动画效果。 

搜索

技术频道 - html技术

4款简单常见的纯CSS表格(table)样式

作者:admin    时间:2020-2-15 21:19:39    浏览:76130

本文介绍4款简单常见的纯CSS表格(table)样式。

1、默认表格(default table)

添加pure-table类样式化表格， 此类向表元素添加填充(padding)和边框(borders)，并使表头突出。

默认表格

默认表格

html代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>Table_Simple CSS for HTML tables</title>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7.  
  8. <style type="text/css">
  9. html {
  10.     font-family: sans-serif;
  11.     -ms-text-size-adjust: 100%;
  12.     -webkit-text-size-adjust: 100%;
  13. }
  14.  
  15. body {
  16.     margin: 10px;
  17. }
  18. table {
  19.     border-collapse: collapse;
  20.     border-spacing: 0;
  21. }
  22.  
  23. td,th {
  24.     padding: 0;
  25. }
  26.  
  27. .pure-table {
  28.     border-collapse: collapse;
  29.     border-spacing: 0;
  30.     empty-cells: show;
  31.     border: 1px solid #cbcbcb;
  32. }
  33.  
  34. .pure-table caption {
  35.     color: #000;
  36.     font: italic 85%/1 arial,sans-serif;
  37.     padding: 1em 0;
  38.     text-align: center;
  39. }
  40.  
  41. .pure-table td,.pure-table th {
  42.     border-left: 1px solid #cbcbcb;
  43.     border-width: 0 0 0 1px;
  44.     font-size: inherit;
  45.     margin: 0;
  46.     overflow: visible;
  47.     padding: .5em 1em;
  48. }
  49.  
  50. .pure-table thead {
  51.     background-color: #e0e0e0;
  52.     color: #000;
  53.     text-align: left;
  54.     vertical-align: bottom;
  55. }
  56.  
  57. .pure-table td {
  58.     background-color: transparent;
  59. }
  60. </style>
  61. </head>
  62. <body>
  63.     <table class="pure-table">
  64.         <thead>
  65.             <tr>
  66.                 <th>#</th>
  67.                 <th>Make</th>
  68.                 <th>Model</th>
  69.                 <th>Year</th>
  70.             </tr>
  71.         </thead>
  72.     
  73.         <tbody>
  74.             <tr>
  75.                 <td>1</td>
  76.                 <td>Honda</td>
  77.                 <td>Accord</td>
  78.                 <td>2009</td>
  79.             </tr>
  80.     
  81.             <tr>
  82.                 <td>2</td>
  83.                 <td>Toyota</td>
  84.                 <td>Camry</td>
  85.                 <td>2012</td>
  86.             </tr>
  87.     
  88.             <tr>
  89.                 <td>3</td>
  90.                 <td>Hyundai</td>
  91.                 <td>Elantra</td>
  92.                 <td>2010</td>
  93.             </tr>
  94.         </tbody>
  95.     </table>
  96. </body>
  97. </html>

execcodegetcode

2、加边框的表格(Bordered Table)

为所有单元(cells)添加垂直和水平边框，用pure-table-bordered样式化表格<table>元素。

加边框的表格(Bordered Table)

加边框的表格(Bordered Table)

html代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>Table_Simple CSS for HTML tables</title>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7.  
  8. <style type="text/css">
  9. html {
  10.     font-family: sans-serif;
  11.     -ms-text-size-adjust: 100%;
  12.     -webkit-text-size-adjust: 100%;
  13. }
  14.  
  15. body {
  16.     margin: 10px;
  17. }
  18. table {
  19.     border-collapse: collapse;
  20.     border-spacing: 0;
  21. }
  22.  
  23. td,th {
  24.     padding: 0;
  25. }
  26.  
  27. .pure-table {
  28.     border-collapse: collapse;
  29.     border-spacing: 0;
  30.     empty-cells: show;
  31.     border: 1px solid #cbcbcb;
  32. }
  33.  
  34. .pure-table caption {
  35.     color: #000;
  36.     font: italic 85%/1 arial,sans-serif;
  37.     padding: 1em 0;
  38.     text-align: center;
  39. }
  40.  
  41. .pure-table td,.pure-table th {
  42.     border-left: 1px solid #cbcbcb;
  43.     border-width: 0 0 0 1px;
  44.     font-size: inherit;
  45.     margin: 0;
  46.     overflow: visible;
  47.     padding: .5em 1em;
  48. }
  49.  
  50. .pure-table thead {
  51.     background-color: #e0e0e0;
  52.     color: #000;
  53.     text-align: left;
  54.     vertical-align: bottom;
  55. }
  56.  
  57. .pure-table td {
  58.     background-color: transparent;
  59. }
  60.  
  61. .pure-table-bordered td {
  62.     border-bottom: 1px solid #cbcbcb;
  63. }
  64.  
  65. .pure-table-bordered tbody>tr:last-child>td {
  66.     border-bottom-width: 0;
  67. }
  68. </style>
  69. </head>
  70. <body>
  71.     <table class="pure-table pure-table-bordered">
  72.         <thead>
  73.             <tr>
  74.                 <th>#</th>
  75.                 <th>Make</th>
  76.                 <th>Model</th>
  77.                 <th>Year</th>
  78.             </tr>
  79.         </thead>
  80.     
  81.         <tbody>
  82.             <tr>
  83.                 <td>1</td>
  84.                 <td>Honda</td>
  85.                 <td>Accord</td>
  86.                 <td>2009</td>
  87.             </tr>
  88.     
  89.             <tr>
  90.                 <td>2</td>
  91.                 <td>Toyota</td>
  92.                 <td>Camry</td>
  93.                 <td>2012</td>
  94.             </tr>
  95.     
  96.             <tr>
  97.                 <td>3</td>
  98.                 <td>Hyundai</td>
  99.                 <td>Elantra</td>
  100.                 <td>2010</td>
  101.             </tr>
  102.         </tbody>
  103.     </table>
  104. </body>
  105. </html>

execcodegetcode

3、只有水平边框的表格(Table with Horizontal Borders)

如果你喜欢只要水平线边框的表格，那么添加pure-table-horizontal类到表格<table>元素。

只有水平边框的表格

只有水平边框的表格

html代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>Table_Simple CSS for HTML tables</title>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7.  
  8. <style type="text/css">
  9. html {
  10.     font-family: sans-serif;
  11.     -ms-text-size-adjust: 100%;
  12.     -webkit-text-size-adjust: 100%;
  13. }
  14.  
  15. body {
  16.     margin: 10px;
  17. }
  18. table {
  19.     border-collapse: collapse;
  20.     border-spacing: 0;
  21. }
  22.  
  23. td,th {
  24.     padding: 0;
  25. }
  26.  
  27. .pure-table {
  28.     border-collapse: collapse;
  29.     border-spacing: 0;
  30.     empty-cells: show;
  31.     border: 1px solid #cbcbcb;
  32. }
  33.  
  34. .pure-table caption {
  35.     color: #000;
  36.     font: italic 85%/1 arial,sans-serif;
  37.     padding: 1em 0;
  38.     text-align: center;
  39. }
  40.  
  41. .pure-table td,.pure-table th {
  42.     border-left: 1px solid #cbcbcb;
  43.     border-width: 0 0 0 1px;
  44.     font-size: inherit;
  45.     margin: 0;
  46.     overflow: visible;
  47.     padding: .5em 1em;
  48. }
  49.  
  50. .pure-table thead {
  51.     background-color: #e0e0e0;
  52.     color: #000;
  53.     text-align: left;
  54.     vertical-align: bottom;
  55. }
  56.  
  57. .pure-table td {
  58.     background-color: transparent;
  59. }
  60. .pure-table-horizontal td,.pure-table-horizontal th {
  61.     border-width: 0 0 1px 0;
  62.     border-bottom: 1px solid #cbcbcb;
  63. }
  64.  
  65. .pure-table-horizontal tbody>tr:last-child>td {
  66.     border-bottom-width: 0;
  67. }
  68. </style>
  69. </head>
  70. <body>
  71.     <table class="pure-table pure-table-horizontal">
  72.         <thead>
  73.             <tr>
  74.                 <th>#</th>
  75.                 <th>Make</th>
  76.                 <th>Model</th>
  77.                 <th>Year</th>
  78.             </tr>
  79.         </thead>
  80.     
  81.         <tbody>
  82.             <tr>
  83.                 <td>1</td>
  84.                 <td>Honda</td>
  85.                 <td>Accord</td>
  86.                 <td>2009</td>
  87.             </tr>
  88.     
  89.             <tr>
  90.                 <td>2</td>
  91.                 <td>Toyota</td>
  92.                 <td>Camry</td>
  93.                 <td>2012</td>
  94.             </tr>
  95.     
  96.             <tr>
  97.                 <td>3</td>
  98.                 <td>Hyundai</td>
  99.                 <td>Elantra</td>
  100.                 <td>2010</td>
  101.             </tr>
  102.         </tbody>
  103.     </table>
  104. </body>
  105. </html>

execcodegetcode

x

4、条纹表格(Striped Table)

当表格较长的时候，通常会用到条纹表格，这样更容易区分数据。在需要改变背景颜色的行tr元素添加pure-table-odd类，便能实现斑马样式的效果。

条纹表格(Striped Table)

条纹表格(Striped Table)

html代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>Table_Simple CSS for HTML tables</title>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7.  
  8. <style type="text/css">
  9. html {
  10.     font-family: sans-serif;
  11.     -ms-text-size-adjust: 100%;
  12.     -webkit-text-size-adjust: 100%;
  13. }
  14.  
  15. body {
  16.     margin: 10px;
  17. }
  18. table {
  19.     border-collapse: collapse;
  20.     border-spacing: 0;
  21. }
  22.  
  23. td,th {
  24.     padding: 0;
  25. }
  26.  
  27. .pure-table {
  28.     border-collapse: collapse;
  29.     border-spacing: 0;
  30.     empty-cells: show;
  31.     border: 1px solid #cbcbcb;
  32. }
  33.  
  34. .pure-table caption {
  35.     color: #000;
  36.     font: italic 85%/1 arial,sans-serif;
  37.     padding: 1em 0;
  38.     text-align: center;
  39. }
  40.  
  41. .pure-table td,.pure-table th {
  42.     border-left: 1px solid #cbcbcb;
  43.     border-width: 0 0 0 1px;
  44.     font-size: inherit;
  45.     margin: 0;
  46.     overflow: visible;
  47.     padding: .5em 1em;
  48. }
  49.  
  50. .pure-table thead {
  51.     background-color: #e0e0e0;
  52.     color: #000;
  53.     text-align: left;
  54.     vertical-align: bottom;
  55. }
  56.  
  57. .pure-table td {
  58.     background-color: transparent;
  59. }
  60.  
  61. .pure-table-odd td {
  62.     background-color: #f2f2f2;
  63. }
  64. </style>
  65. </head>
  66. <body>
  67.     <table class="pure-table">
  68.         <thead>
  69.             <tr>
  70.                 <th>#</th>
  71.                 <th>Make</th>
  72.                 <th>Model</th>
  73.                 <th>Year</th>
  74.             </tr>
  75.         </thead>
  76.     
  77.         <tbody>
  78.             <tr class="pure-table-odd">
  79.                 <td>1</td>
  80.                 <td>Honda</td>
  81.                 <td>Accord</td>
  82.                 <td>2009</td>
  83.             </tr>
  84.     
  85.             <tr>
  86.                 <td>2</td>
  87.                 <td>Toyota</td>
  88.                 <td>Camry</td>
  89.                 <td>2012</td>
  90.             </tr>
  91.     
  92.             <tr class="pure-table-odd">
  93.                 <td>3</td>
  94.                 <td>Hyundai</td>
  95.                 <td>Elantra</td>
  96.                 <td>2010</td>
  97.             </tr>
  98.     
  99.             <tr>
  100.                 <td>4</td>
  101.                 <td>Ford</td>
  102.                 <td>Focus</td>
  103.                 <td>2008</td>
  104.             </tr>
  105.     
  106.             <tr class="pure-table-odd">
  107.                 <td>5</td>
  108.                 <td>Nissan</td>
  109.                 <td>Sentra</td>
  110.                 <td>2011</td>
  111.             </tr>
  112.     
  113.             <tr>
  114.                 <td>6</td>
  115.                 <td>BMW</td>
  116.                 <td>M3</td>
  117.                 <td>2009</td>
  118.             </tr>
  119.     
  120.             <tr class="pure-table-odd">
  121.                 <td>7</td>
  122.                 <td>Honda</td>
  123.                 <td>Civic</td>
  124.                 <td>2010</td>
  125.             </tr>
  126.     
  127.             <tr>
  128.                 <td>8</td>
  129.                 <td>Kia</td>
  130.                 <td>Soul</td>
  131.                 <td>2010</td>
  132.             </tr>
  133.         </tbody>
  134.     </table>
  135. </body>
  136. </html>

execcodegetcode

您可能对以下文章也感兴趣

标签: css  table  
x
search
广告: 【限时】云主机 24元/月