另一种CSS实现表格加边框思路

发表于2013-04-09 17:55:17来源于创想网页设计工作室

次点击[大] [中] [小] [打印] [关闭窗口] [评论]

今天在浏览一个网站时，发现它的表格边框用的挺好看的，而且兼容浏览器，发出来给大家参考一下，呵呵！

HTML代码如下：

<table class="table" border="0" cellspacing="0" cellpadding="0">

  <tr>

    <td><strong>字段</strong></td>

    <td><strong>说明</strong></td>

  </tr>

  <tr>

    <td>aid</td>

    <td>内容ID</td>

  </tr>

  <tr>

    <td>cid</td>

    <td>所属栏目ID</td>

  </tr>

  <tr>

    <td>title</td>

    <td>内容标题</td>

  </tr>

  <tr>

    <td>titlex</td>

    <td>带样式的内容标题如颜色和加粗</td>

  </tr>

  <tr>

    <td>urltitle</td>

    <td>标题英文URL名</td>

  </tr>

  <tr>

    <td>subtitle</td>

    <td>副标题名称</td>

  </tr>

  <tr>

    <td>keywords</td>

    <td>内容关键词</td>

  </tr>

  <tr>

    <td>description</td>

    <td>内容描述</td>

  </tr>

  <tr>

    <td>updatetime</td>

    <td>内容最后更新时间(需要使用时间格式化标签)</td>

  </tr>

  <tr>

    <td>inputtime</td>

    <td>内容插入时间(需要使用时间格式化标签)</td>

  </tr>

  <tr>

    <td>image</td>

    <td>内容形象图</td>

  </tr>

  <tr>

    <td>url</td>

    <td>内容跳转地址</td>

  </tr>

  <tr>

    <td>copyfrom</td>

    <td>内容来源</td>

  </tr>

  <tr>

    <td>views</td>

    <td>内容浏览量</td>

  </tr>

  <tr>

    <td>aurl</td>

    <td>内容超链接地址</td>

  </tr>

  <tr>

    <td>cname</td>

    <td>内容所属栏目名称</td>

  </tr>

  <tr>

    <td>csubname</td>

    <td>内容所属栏目副名称</td>

  </tr>

  <tr>

    <td>curl</td>

    <td>内容所属栏目的超链接地址</td>

  </tr>

  <tr>

    <td>i</td>

    <td>循环序列(只能在列表循环内使用)</td>

  </tr>

  <tr>

    <td>扩展字段</td>

    <td>扩展模型中的字段以添加的扩展字段名为准直接调用即可</td>

  </tr>

</table>

CSS样式如下：

body, html {

height: 100%;

font-size:14px;

color:#333;

font-family:'微软雅黑';

background-color:#f3f5fb;

}

body, ul, li {

margin: 0px;

padding: 0px;

}

.table {

border-left:1px solid #c1d1dc;

border-top:1px solid #c1d1dc;

margin:10px;

}

.table td {

border-bottom:1px solid #c1d1dc;

border-right:1px solid #c1d1dc;

padding:5px;

padding-left:10px;

padding-right:10px;

}

效果如下：

相关热词搜索：CSS表格边框

上一篇：推荐更简洁的清除浮动方式

下一篇：ie6下解决png透明的方法