制作1px边框表格的几种方法

原创 2005年05月28日 10:26:00
有过网页制作经验的朋友一定知道:一般来讲,把表格的边框定义为1px时,即border=1,而实际上是2px。而我们在很多时候需要那种真正的边框为1px的表格,下面就介绍几种方法。

  一、用嵌套表格

  用两个表格嵌套,外层的表格的长与宽比里层的多出2px,并设置对齐属性为水平居中、垂直居中,然后把外层表格的背景设为你需要的边框颜色,里层表格背景设为与网页背景相同,这样就实现我们的愿望了,实例如下:

  <table cellspacing="0" cellpadding="0" bgcolor="#000000" width="32" height="32" border="0">
  <tr>
  <td align="center">
  <table cellspacing="0" cellpadding="0" bgcolor="#ffffff" width="30" height="30" border="0">
  <tr>
  <td> </td>
  </tr>
  </td>
  </tr>
  </table>

  二、设置亮、暗边框颜色

  表格有亮边框(bordercolorlight)和暗边框(bordercolordark)两个属性,把表格边框(border)设为1px,亮边框(bordercolorlight)设为背景色,暗边框(bordercolordark)设为你需要的实际边框颜色就可以了,实列如下:
  
  <table border="1" cellpadding="0" cellspacing="0" width="32" height="32" bordercolorlight="#000000" bordercolordark="#FFFFFF">
  <tr>
  <td> </td>
  </tr>
  </table>

三、用CSS定义(一)

  代码为:
  style="border-collapse: collapse"

  实例如下:

  <table border="1" cellspacing="0" width="32" height="32" style="border-collapse: collapse" bordercolor="#000000" cellpadding="0">
  <tr>
  <td> </td>
  </tr>
  </table>

  如果你用过Frontpage xp,你会发现,在Frontpage xp中定义的表格默认的设置就是用CSS定义过了的。

  四、用CSS定义(二)

  代码为:
  style="border: 1px solid #000000;"

  实例如下:

  <table cellspacing="1" width="32" height="32" style="border: 1px solid #000000; ">
  <tr>
  <td> </td>
  </tr>
  </table>


  有一点一定要注意:这时候不要再设置表格边框(border)、亮边框(bordercolorlight)和暗边框(bordercolordark)属性,否则不会出现预想的结果。

设置表格1px边框线的两种方式

方式一       使用 CSS属性 border-collapse 方式二
  • wuqinfei_cs
  • wuqinfei_cs
  • 2014年08月20日 17:37
  • 1438

1像素表格(1px表格)的5种制作方法

在转载CSS觉问题及解决办法时看到的这样定义表格边框的方法,如果用表格的border="1"属性定义,实际显示的宽度要比1px粗。所以我直到现在都是定义table的left和top边框,然后定义td的...
  • changhong009
  • changhong009
  • 2011年11月25日 22:54
  • 4674

制作1px表格边框

有过网页制作经验的朋友一定知道:一般来讲,把表格的边框定义为1px时,即border=1,而实际上是2px。而我们在很多时候需要那种真正的边框为1px的表格,下面就介绍几种方法。 一、用嵌套表格 用两...
  • qinson
  • qinson
  • 2004年08月19日 15:27
  • 2391

CSS绘制1px边框表格

.table{ border-collapse:collapse; } .table th,.table td{ border:#ccc solid 1px; padding:5px 0 5p...
  • sloafer
  • sloafer
  • 2017年09月22日 15:31
  • 66

如何实现1px边框

当手机DPR=2.0时,设置的1px实际上就变成了2px。所以我们就需要通过媒体查询来处理在不同DPR下的缩放以获取正确的1px像素。 .father { margin-bottom: ...
  • MyFuture_MyDream
  • MyFuture_MyDream
  • 2017年03月24日 00:59
  • 721

CSS/移动端添加真正1PX边框线

.border-1px{ position: relative; &:after{ display: block; position: absolute...
  • sinat_19327991
  • sinat_19327991
  • 2017年06月05日 22:55
  • 366

实现真正的1px的边框 border

实现真正的1px的边框 border问题 解决的问题是1像素的边框在某些移动设备中会显示过粗,主要原因是设备进行了放大,成为了2px; 解决利用媒体查询和min-device-pixel-ratio...
  • peng_9
  • peng_9
  • 2017年12月10日 23:28
  • 72

再谈mobile web retina 下 1px 边框解决方案

本文实际上想说的是ios8下 1px解决方案。 1px的边框在devicePixelRatio = 2的retina屏下会显示成2px,在iphone 6 plug 下,更显示成3px。由其影响美感。...
  • huang100qi
  • huang100qi
  • 2015年08月08日 09:33
  • 2518

html 边框变粗 margin -1px

最近刚开始学习web前端,html和css,对于遇到的边框变粗的问题,用margin为负值解决问题发表一些自己的理解 首先我们来看看下面一张图片 list-style: none; ...
  • pan_haufei
  • pan_haufei
  • 2016年11月07日 08:59
  • 560

html5移动端页面1px边框问题

HTML5移动端开放的同学们都遇到过这个问题: 很早之前我自己也遇到过这样的问题,设计对你的1px边框很不满意,这时候你还在纳闷,什么问题。设计会说boy,你是不是移动端开发的,这让我自己很尴尬,因为...
  • ImProgrammerBoy
  • ImProgrammerBoy
  • 2017年07月28日 17:00
  • 454
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:制作1px边框表格的几种方法
举报原因:
原因补充:

(最多只允许输入30个字)