用CSS给表格加边框
很久之前,给表格加边框用的方法是给表格加上背景色,然后把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给表格加边框的更多相关文章
- CSS操作表格的边框和表格的属性示例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 用CSS为表格添加边框
格式: <style type="text/css"> table tr td,th {border:1px solid #000;} </style>
- Html-浅谈如何正确给table加边框
一般来说,给表格加边框都会出现不同的问题,以下是给表格加边框后展现比较好的方式 <style> table,table tr th, table tr td { border:1px so ...
- 浅谈如何正确给table加边框
一般来说,给表格加边框都会出现不同的问题,以下是给表格加边框后展现比较好的方式 <style> table,table tr th, table tr td { border:1px so ...
- 2017-11-28 Html-浅谈如何正确给table加边框
一般来说,给表格加边框都会出现不同的问题,以下是给表格加边框后展现比较好的方式 <style> table,table tr th, table tr td { border:1px so ...
- Html-如何正确给table加边框
一般来说,给表格加边框都会出现不同的问题,以下是给表格加边框后展现比较好的方式 <style> table,table tr th, table tr td { border:1px so ...
- Bootstrap3基础 table-bordered/hover 表格加外边框和鼠标悬停对应行的背景色加深
内容 参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
- CSS鼠标悬停图片加边框效果,不位移的方法
<!DOCTYPE HTML> <html lang="en-US"> <head> <title>css实现鼠标悬停时图片加边框效 ...
- word中几个好用的宏代码(立方米上标、关闭样式自动更新、删除无效样式、表格加粗边框、宋体引号)
Sub 替换立方米() With Selection.Find .Text = "m3" .Replacement.Text = "mm3" .Forward ...
随机推荐
- cluvfy stage命令用法
1.获取集群验证工具cluvfy的帮助信息 grid@rac1:/home/grid>cluvfy -help USAGE: cluvfy [ -help ] cluvfy stage { -l ...
- UVA 11134 FabledRooks 传说中的车 (问题分解)
摘要:贪心,问题分解. 因为行列无关,所以这个二维问题可以分解成两个一维问题. 优先队列实现:类似区间点覆盖的问题,先按照左端点排序,相同然后在按右端点排序(灵活性小的优先选).最优的选法,当然是要使 ...
- JS中的作用域和作用域链
本文原链接:https://cloud.tencent.com/developer/article/1403589 前言 作用域(Scope) 1. 什么是作用域 2. 全局作用域和函数作用域 3. ...
- fork新建进程
#include <sys/types.h>#include<sys/wait.h>#include<unistd.h>#include<stdio.h> ...
- Hive相关集锦
Hive介绍 http://www.cnblogs.com/sharpxiajun/archive/2013/06/02/3114180.htmlHive的数据类型和数据模型 http://www.c ...
- kubernetes-核心概念及创建应用(六)
kubernetes是什么: •Kubernetes是Google在2014年开源的一个容器集群管理系统,Kubernetes简称K8S.•K8S用于容器化应用程序的部署,扩展和管理.•K8S提供了容 ...
- java abstraction and encapsulation
How is Abstraction different from Encapsulation? Abstraction happens at class level design. It resul ...
- JS事件类型--1
滚轮事件其实就是一个mousewheel事件,这个事件跟踪鼠标滚轮,类似Mac的触屏版. 一.客户区坐标位置 鼠标事件都是在浏览器视口的特定位置上发生的.这个位置信息保存在事件对象的clientX和c ...
- comboBox 下拉宽度自适应
///适用combobox绑定datatable private void comboBox_DataSourceChanged(object sender, EventArgs e) { Combo ...
- nodejs开发过程中遇到的一些插件记录
1.chalk Github:https://github.com/chalk/chalk 终端样式定制插件,可自定义输出日志的样式. 1.semver 管网:https://semver.o ...