细线表格的制作

最新推荐文章于 2023-03-18 23:02:59 发布

原创最新推荐文章于 2023-03-18 23:02:59 发布 · 265 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #JavaScript #Web #HTML #ViewUI

css 专栏收录该内容

1 篇文章

订阅专栏

在从事web网页程序开发时,table是我们常用的html标签,为了页面美观,细线表格是web开发中基础的要求,也不知道当初制定html标准时是怎么想的,明明设置了table的border="1",非要将表格边框实际大小变成了2px,搞得每次用时还得重新写css进行控制.下边就总结两种在网上搜集的方法,以备随时查阅:

一、通过表格背景颜色和单元格背景颜色结合，将表格边框设置为1px

<table width="95%" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#000000">
  <tr>
    <td bgcolor="#FFFFFF">&nbsp;</td>
    <td bgcolor="#FFFFFF">&nbsp;</td>
    <td bgcolor="#FFFFFF">&nbsp;</td>
  </tr>
  <tr>
    <td bgcolor="#FFFFFF">&nbsp;</td>
    <td bgcolor="#FFFFFF">&nbsp;</td>
    <td bgcolor="#FFFFFF">&nbsp;</td>
  </tr>
  <tr>
    <td bgcolor="#FFFFFF">&nbsp;</td>
    <td bgcolor="#FFFFFF">&nbsp;</td>
    <td bgcolor="#FFFFFF">&nbsp;</td>
  </tr>
</table>

二、完全通过css进行控制

css代码：

<style type="text/css"> 
<!-- 
.table01{ 
border-collapse:collapse; 
} 

.td01{ 
background:#FFF; 
border:solid 1px #f90; 
height:22px; 
} 
--> 
</style>

html代码：

<table width="95%" align="center" class="table01">
  <tr>
    <td class="td01">&nbsp;</td>
    <td class="td01">&nbsp;</td>
    <td class="td01">&nbsp;</td>
  </tr>
  <tr>
    <td class="td01">&nbsp;</td>
    <td class="td01">&nbsp;</td>
    <td class="td01">&nbsp;</td>
  </tr>
  <tr>
    <td class="td01">&nbsp;</td>
    <td class="td01">&nbsp;</td>
    <td class="td01">&nbsp;</td>
  </tr>
</table>

这种方法我采用的是类选择器，使用标签选择器也可实现同样效果

两种方法的优劣自己评估去吧，自由选用~~

参考文章：http://leotheme.cn/javascript/thin-table.html

http://www.mangguo.org/thin-border-table-browser-compatible-writing-method/