很久之前，给表格加边框用的方法是给表格加上背景色，然后把cellspacing="1"，再给td设置成另一种颜色，这样间接的加边框颜色。

一直没去细研究，今天发现了一种很简单的加边框的方法，关键代码如下：

.a{border-collapse:collapse; border:1px solid #339999;}
.a tr td{border:1px solid #339999;}

我和同事想要实现的方法是两个表格落在一起，下边表格的边框去掉，也就是表格没有上边框，css样式如下：

.a{border-collapse:collapse; border:1px solid #339999; border-top:0px solid #339999}
.a tr td{border:1px solid #339999;border-top:0px solid #339999}

html代码如下：

<style type="text/css">
<!--
.a{border-collapse:collapse; border:1px solid #339999; border-top:0px solid #339999}
.a tr td{border:1px solid #339999;border-top:0px solid #339999}
-->
</style></head>

<body>
<table height="60" cellpadding="5" width="60%" class="a">
  <tr>
    <td>0</td>
    <td>0</td>
    <td>0</td>
  </tr>
  <tr>
    <td>0</td>
    <td>0</td>
    <td>0</td>
  </tr>
</table>

同事最初找的代码如下，上面的代码就是这个代码的优化结果：

<table style="border-collapse:collapse" border="1" bordercolor="#339999" height="60" cellpadding="5" width="60%">
<tr><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td></tr>
<tr><td>0</td><td>0</td><td>0</td></tr>
</table>

本文转自：　http://lnzengjie.blog.163.com/blog/static/236201622009880948440/

用CSS给表格加边框的更多相关文章

  1. CSS操作表格的边框和表格的属性示例代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 用CSS为表格添加边框

    格式: <style type="text/css"> table tr td,th {border:1px solid #000;} </style>

  3. Html-浅谈如何正确给table加边框

    一般来说,给表格加边框都会出现不同的问题,以下是给表格加边框后展现比较好的方式 <style> table,table tr th, table tr td { border:1px so ...

  4. 浅谈如何正确给table加边框

    一般来说,给表格加边框都会出现不同的问题,以下是给表格加边框后展现比较好的方式 <style> table,table tr th, table tr td { border:1px so ...

  5. 2017-11-28 Html-浅谈如何正确给table加边框

    一般来说,给表格加边框都会出现不同的问题,以下是给表格加边框后展现比较好的方式 <style> table,table tr th, table tr td { border:1px so ...

  6. Html-如何正确给table加边框

    一般来说,给表格加边框都会出现不同的问题,以下是给表格加边框后展现比较好的方式 <style> table,table tr th, table tr td { border:1px so ...

  7. Bootstrap3基础 table-bordered/hover 表格加外边框和鼠标悬停对应行的背景色加深

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  8. CSS鼠标悬停图片加边框效果,不位移的方法

    <!DOCTYPE HTML> <html lang="en-US"> <head> <title>css实现鼠标悬停时图片加边框效 ...

  9. word中几个好用的宏代码（立方米上标、关闭样式自动更新、删除无效样式、表格加粗边框、宋体引号）

    Sub 替换立方米() With Selection.Find .Text = "m3" .Replacement.Text = "mm3" .Forward ...

随机推荐

  1. java入门第一章——java开发入门

    习题解答 一.填空题 (p2)1.java的三个技术平台分别是(java SE.java EE.java ME)(标准.企业.小型) (p3)2.java程序的运行环境简称为(JRE)(开发环境-JD ...

  2. python_83_random_应用验证码

    import random checkcode='' for i in range(0,5):#5位验证码 current=random.randrange(0,5) #字母 if current== ...

  3. 巧用 Odoo act_window 的 flags实现一些个性化的视图控制

    转自:http://www.khcloud.net:4082/?thread-58.htm 'flags': { 'sidebar': False, //是否显示sidebar区域(主要为action ...

  4. centos6启动故障排除

    centos6中boot文件被全部删除的故障排除 /boot文件里关于启动的核心文件有三个,/vmlinuz-2.6.32-696.e16.x86_64,initramfs-2.6.32-696.el ...

  5. http 基础与通讯原理

    目录 http 基础与通讯原理 Internet 与中国 1990年10月 注册CN顶级域名 1993年3月2日 接入第一根专线 1994年4月20日 实现与互联网的全功能连接 1994年5月21日 ...

  6. 201621123080 《Java程序设计》第2周学习总结

    Week02-Java基本语法与类库 1. 本周学习总结 本周主要学习了java的数据类型.运算符,String类,java的简单输入输出与流程控制. 在做题上对String和数组的理解与区分仍不够深 ...

  7. 03等待多个线程返回WaitForMultipleObject

    二. WaitForMultipleObject 等待单个线程返回 1. 函数原型 DWORD WINAPI WaitForMultipleObjects( _In_ DWORD nCount, _I ...

  8. Three displays CodeForces - 987C （dp）

    C. Three displays time limit per test 1 second memory limit per test 256 megabytes input standard in ...

  9. POJ：2777-Count Color（线段树+状压）

    Count Color Time Limit: 1000MS Memory Limit: 65536K Description Chosen Problem Solving and Program d ...

  10. 思维题：UVa1334-Ancient Cipher

    Ancient Cipher Ancient Roman empire had a strong government system with various departments, includi ...