很久之前，给表格加边框用的方法是给表格加上背景色，然后把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. UVA 690 PipelineScheduling 位运算+dfs+剪枝

    一开始最容易想到间隔最多为n,但是结点还是太多了,需要优化. 预处理:预判一下并保存下一个可以放的位置距离之前的距离.这样可以减少很多判断. 最优化剪枝:如果当前长度+剩下没放的程序*最短间隔如果大于 ...

  2. 2018.5.9 Oracle数据库查询命令

    0.查询所有数据(最简单,但是时间很久) select * from emp; Result: EMPNO ENAME JOB MGR HIREDATE SAL COMM DEPTNO ----- - ...

  3. 【转】Intellij IDEA 提交代码到远程GitHub仓库

    1.文章参考自:http://my.oschina.net/lujianing/blog/180728 2.设置相关绑定 Settings——Version Control——Git——Path to ...

  4. extranuclear gene|non-Mendelian inheritance|uniparental inheritance|maternal inheritance

    5.8某些细胞器含有DNA 因为除细胞核内的染色体外,细胞质中的细胞器上也有遗传物质(这类遗传物质被称为核外基因(extranuclear gene),比如线粒体上的rRNA,这是因为细胞器基因组是独 ...

  5. java基础—接口概念

    一.接口的概念 JAVA是只支持单继承的,但现实之中存在多重继承这种现象,如“金丝猴是一种动物”,金丝猴从动物这个类继承,同时“金丝猴是一种值钱的东西”,金丝猴从“值钱的东西”这个类继承,同时“金丝猴 ...

  6. CocoaPods在OS X Yosemite上突然不能用了的解决办法

    最近开发的时候发现自己的CocoaPods不能使用了! 根据报的错误上网搜寻answer,于是搜到了解决办法 在 OS X Yosemite 报这样的错: [MT] DVTAssertions: AS ...

  7. C# 用qq邮箱发邮件

    一.在企业的QQ邮箱中开启POP3/SMTP服务 开启服务时,授权密码保存好. 二.示例 public static string UserName = ""; // 企业邮箱 p ...

  8. module.exports exports 和export export default

    首先可以知道的是这是两组不同模块规范. module.exports 是CommonJS模块规范,通过require 导入 a.js: var x = 'hello' module.exports.x ...

  9. Missing letters-freecodecamp算法题目

    Missing letters 1.要求 从传递进来的字母序列中找到缺失的字母并返回它. 如果所有字母都在序列中,返回 undefined. 2.思路 设定缺失变量miss 在for循环遍历字符串的各 ...

  10. python基本操作（五）

    if 判断 if 条件: 代码1 代码2 代码3 代码块(同一缩进级别的代码,例如代码1.代码2和代码3是相同缩进的代码,这三个代码组合在一起就是一个代码块,相同缩进的代码会自上而下的运行) cls ...