2014年4月8日 星期二

讓table漂亮的CSS

<html>
<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <link rel="stylesheet" type="text/css" href="stdtheme.css">
</head><table border=1 class=reference>
...
</table>

stdtheme.css
<style type="text/css">
  table.reference,table.tecspec{
   border-collapse:collapse;width:100%;
  }
 
  table.reference tr:nth-child(odd) {background-color:#f1f1f1;}
  table.reference tr:nth-child(even) {background-color:#ffffff;}
 
  table.reference tr.fixzebra   {background-color:#f1f1f1;}
 
  table.reference th{
   color:#ffffff;background-color:#555555;border:1px solid #555555;padding:3px;vertical-align:top;text-align:left;
  }
 
  table.reference th a:link,table.reference th a:visited{
   color:#ffffff;
  }
 
  table.reference th a:hover,table.reference th a:active{
   color:#EE872A;
  }
 
  table.reference td{
   border:1px solid #d4d4d4;padding:5px;padding-top:7px;padding-bottom:7px;vertical-align:top;
  }
 
  table.reference td.example_code
  {
  vertical-align:bottom;
  }
 
  table.summary
  {
  border:1px solid #d4d4d4;
  padding:5px;
  font-size:100%;
  color:#555555;
  background-color:#fafad2;
  }

</style>

沒有留言:

張貼留言