表格线边框重复css解决方法

1、td 的边框和table 的边框重叠

.table { border-left:1px solid #dedede; border-top:1px solid #dedede;}

.td { border-right:1px solid #dedede; border-bottom:1px solid #dedede;}

table 只用左边框和上边框,每个td只有右边框和下边框,效果就是整个表格左、上边框是连续实线,右、下边框是延续td的边框所以是断断续续的

解决方法:

.table {border:1px solid #dedede; border-collapse:collapse;}

.td {border:1px solid #dedede; } 橘色字体是关键,边框设置也不用分上下左右了,重叠的话会一个覆盖另一个

firefox中:td的border覆盖table 的,IE中table 的border覆盖td的,我这里border颜色一样,无所谓了

表格线常见问题:

1.表格边框与表格单元格线的重叠。[采用border-collapse:collapse解决]

2.嵌套表格与被嵌套表格边线重叠问题。[采用border-top|left|right|bottom解决]

3.嵌套表格与被嵌套表格对不齐的问题。[采用table-layout: fixed;解决]

4.border-collapse有两个属性,separate 和 collapse 。

separate是默认属性,表格边框默认有1px 的间隙,在表格排版时代,设置好表格背景色,我们曾用它来挤出版块的外边框;

collapse,是将表格边框的间隙去掉,这样给表格的td边框赋值时就不会产生双线框了。

Demo:没有设置collapse属性的双线表格

时间: 2024-12-18 04:48:43

表格线边框重复css解决方法的相关文章

oracle分页查询结果集重复问题&解决方法

做项目时,无意间发现了分页上的一个bug,在此记录一下: 首先手动将后台输出的sql语句复制进oracle中查看,以便排查错误,对比以下视图前10条的结果集与10到20条的结果集,发现大部分记录出现重复现象,SQL语句如下: --前10条记录 select *   from (select row_.*, rownum rownum_           from (select t.idcard, count(1)                   from sampling.v_unvou

主键唯一键重复插入解决方法

[MySQL日记]主键唯一键重复插入解决方法 我们插入数据的时候,有可能碰到重复数据插入的问题,但是这些数据又是不被允许有重复值: ? 1 CREATE TABLE stuInfo ( id INT NOT NULL COMMENT '序号', name VARCHAR(20) NOT NULL DEFAULT '' COMMENT '姓名', age INT NOT NULL DEFAULT 0 COMMENT '年龄', PRIMARY KEY (id), UNIQUE KEY uniq_n

iframe 跨域自适应 纯css解决方法

<style type="text/css">body{background:#f00;}body, html,#ifm1{width:100%;height:100%;overflow:hidden;margin:0;}#ifm1{width:100%;height:100%;overflow:hidden;margin:0;}</style><iframe id="ifm1" src='http://www.csdn.net' fr

【系统Configmachine.config与自己的应用程序的App.config/Web.Config配置节点重复】解决方法

自己的应用程序的App.config或Web.Config文件中与系统的C:\Windows\Microsoft.NET\Framework64\v4.0.30319\Configmachine.config文件1.重复如下配置: <DbProviderFactories> <add name="MySQL Data Provider2" invariant="MySql.Data.MySqlClient" description=".N

QTableWidget表格合并若干问题及解决方法

Qt提供 QTableWidget作为表格的类以实现表格的基本功能,表格中所装载的每一个单元格由类QTableWidgetItem提供.这是基于表格实现 Qt提供的一个基础类,若想实现定制表格和单元格的功能则需要派生重写,使用Qt经典的MV结构 QTableView+QAbstractItemMode来实现. 关于QTableWidget+QTableWidgetItem使用方法简介: 通常在使用这对组合以实现表格基本功能时,通常的做法是: ///////////////////////////

MVC Ajax.BeginForm重复提交解决方法

mvc使用MVC Ajax.BeginForm提交的时候有重复提交结果的时候检查相关js文件引用情况, 其中mvc4注意 1 2 3 4 @Scripts.Render("~/bundles/modernizr") bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(                        "~/Scripts/jquery.unobtrusive*",

css中textarea去掉边框和选中后的蓝色边框问题的解决方法

我们在设计网页的输入框时,有时会遇到需要把textarea的边框去掉的问题,经过测试,下面的代码是可以的. textarea{ border: solid 0px; outline:none; }

jquery on()方法重复绑定解决方法

最近再一次项目中发现 不刷新页面的情况下使用on()方法绑定事件会出现重复执行的问题,意思就是说点击一次会绑定一次...点击n次会绑定n次,执行起来是以你绑定的次数为准,绑定了n次就会执行n次 解决办法 在每次进行on()绑定之前先使用off()方法解除下绑定 例: //解除绑定事件 $('#aa').off('click'); //添加绑定事件 $('#aaa').on('click',dianjishijian); 完美解决重复绑定事件问题.

常见css垂直自适应布局(css解决方法)

css3的盒模型 <!DOCTYPE html> <html > <head> <title>div + css宽度自适应(液态布局)</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> /*左边栏,设定宽度*/