首页 新闻 论坛 群组 Blog 文档 下载 读书 Tag 网摘 搜索 .NET Java 游戏 视频 人才 外包 培训 数据库 书店 程序员
中国软件网
欢迎您:游客 | 登录 注册 帮助
  • 怎么用表格加CSS实现这样的样式 [已结贴,结贴人:yzqbao55]
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于:2008-05-21 23:07:58 楼主
    就是这样的样式!
    加上表格的内边框
    20  修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    发表于:2008-05-22 00:27:181楼 得分:10
    可以分位置对td定义几个样式。
    比如除最右边一排的td定义这样一个有右边框和下边框的样式
    td.td1{border-right:solid 1px #999;border-bottom:solid 1px #999;}
    最右边的则不要定义右边框:
    td.td2{border-bottom:solid 1px #999;}
    另外 对于顶部的则可以再定义一个样式
    td.header{background:#CCC;font-weight:bold;}
    最后应用这几个样式来看一个实例:

    HTML code
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <style type="text/css"> td.td1{border-right:solid 1px #999;border-bottom:solid 1px #999;} td.td2{border-bottom:solid 1px #999;} td.header{background:#EEE;font-weight:bold;} </style> </head> <body> <table border="0" cellpadding="4" cellspacing="0"> <tr> <td class="td1 header">商品名称</td> <td class="td1 header">市场价</td> <td class="td1 header">商城价</td> <td class="td1 header">优惠价</td> <td class="td2 header">删除</td> </tr> <tr> <td class="td1">&nbsp;</td> <td class="td1">&nbsp;</td> <td class="td1">&nbsp;</td> <td class="td1">&nbsp;</td> <td class="td2">&nbsp;</td> </tr> <tr> <td class="td1">&nbsp;</td> <td class="td1">&nbsp;</td> <td class="td1">&nbsp;</td> <td class="td1">&nbsp;</td> <td class="td2">&nbsp;</td> </tr> </table> </body> </html>
    修改 删除 举报 引用 回复
    进入用户个人空间
    加为好友
    发送私信
    在线聊天
    • java2000_net
    • 等级:
    发表于:2008-05-22 06:45:552楼 得分:10
    最简单的 border=1
    或者在加上
    bordercolordark="#000000" bordercolorlight="#FFFFFF"

    参考这个,虽然有点老套了,更好的CSS还是用楼上的吧,不过我还是喜欢这个,用的习惯了。

    HTML code
    <table border=1 cellspacing=0 cellpadding=2 bgcolor="EEEEEE" bordercolordark="#FFFFFF" bordercolorlight="#000000"> <tr> <td>123</td> <td>123</td> <td>123</td> </tr> <tr> <td>123</td> <td>123</td> <td>123</td> </tr> </table>
    修改 删除 举报 引用 回复

    网站简介广告服务网站地图帮助联系方式诚聘英才English 问题报告
    北京创新乐知广告有限公司 版权所有 京 ICP 证 070598 号
    世纪乐知(北京)网络技术有限公司 提供技术支持
    Copyright © 2000-2008, CSDN.NET, All Rights Reserved