html 简单的table样式

原创

已于 2022-10-25 19:03:27 修改 · 3w 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #css

于 2017-07-03 15:49:11 首次发布

本文介绍了四种不同的CSS表格样式实现方法，包括单像素边框表格、带背景图的表格、自动换行颜色的表格及鼠标悬停高亮的表格，并提供了完整的HTML和CSS代码示例。

效果预览：

代码：

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="utf-8">
  5     <title>html 简单的table样式</title>
  6     <style type="text/css">
  7     /* gridtable */
  8     table.gridtable {
   
   
  9         font-family: verdana,arial,sans-serif;
 10         font-size:11px;
 11         color:#333333;
 12         border-width: 1px;
 13         border-color: #666666;
 14         border-collapse: collapse;
 15     }
 16     table.gridtable th {
   
   
 17         border-width: 1px;
 18         padding: 8px;
 19         border-style: solid;
 20         border-color: #666666;
 21         background-color: #dedede;
 22     }
 23     table.gridtable td {
   
   
 24         border-width: 1px;
 25         padding: 8px;
 26         border-style: solid;
 27         border-color: #666666;
 28         background-color: #ffffff;
 29     }
 30     /* /gridtable */
 31 
 32     /* imagetable */
 33     table.imagetable {
   
   
 34         font-family: verdana,arial,sans-serif;
 35         font-size:11px;
 36         color:#333333;
 37         border-width: 1px;
 38         border-color: #999999;
 39         border-collapse: collapse;
 40     }
 41     table.imagetable th {
   
   
 42         background:#b5cfd2 url('cell-blue.jpg');
 43         border-width: 1px;
 44         padding: 8px;
 45         border-style: