用DIV+CSS实现传统的只有TABLE才能实现的细线网格

原创 2004年11月04日 08:50:00

昨天在网页设计区看到一个人问到这个问题,接着就出现了很多TABLE的誓死拥护者,看不惯hitwall.gif,就写了一个样例给他们看,让他们看看DIV+CSS是如何实现的,并且是如何的明了的,由于本人现在在公司用的是服务器,还没有自己的专用机(新来的嘛red_smile.gif),所以也就没有其它浏览器进行测试,我目前的运行 环境是WIN2K AD SERVER + IE6.0,代码如下,你可以保存为一个HTML文件,再打开看看效果shades_smile.gif

<html>
<head>
<style>
!--
.rows {
 display:block
 border-bottom:#000 1px solid;
}
.rows ul {
 list-style:none;
 display:block;
 margin:0px;
}
.rows li {
 width:100px;
}
.leftli {
 float:left;
 border:#000 1px solid;
 border-right:0px;
 border-bottom:0px;
 margin-right:-2px;
 padding:2px 10px 2px 10px;
}
.rightli {
 border:#000 1px solid;
 border-bottom:0px;
 padding:2px 10px 2px 10px;
}
.b-leftli {
 float:left;
 border:#000 1px solid;
 border-right:0px;
 margin-right:-2px;
 padding:2px 10px 2px 10px;
}
.b-rightli {
 border:#000 1px solid;
 padding:2px 10px 2px 10px;
}
-->
</style>
</head>
<body>
<div class="rows">
<ul>
 <li class="leftli">123</li>
 <li class="leftli">123</li>
 <li class="leftli">123</li>
 <li class="leftli">123</li>
 <li class="rightli">456</li>
</ul>
<ul>
 <li class="leftli">abc</li>
 <li class="leftli">abc</li>
 <li class="leftli">abc</li>
 <li class="leftli">abc</li>
 <li class="rightli">def</li>
</ul>
<ul>
 <li class="leftli">ABC</li>
 <li class="leftli">ABC</li>
 <li class="leftli">ABC</li>
 <li class="leftli">ABC</li>
 <li class="rightli">DEF</li>
</ul>
<ul>
 <li class="leftli">123</li>
 <li class="leftli">123</li>
 <li class="leftli">123</li>
 <li class="leftli">123</li>
 <li class="rightli">456</li>
</ul>
<ul>
 <li class="leftli">abc</li>
 <li class="leftli">abc</li>
 <li class="leftli">abc</li>
 <li class="leftli">abc</li>
 <li class="rightli">def</li>
</ul>
<ul>
 <li class="leftli">ABC</li>
 <li class="leftli">ABC</li>
 <li class="leftli">ABC</li>
 <li class="leftli">ABC</li>
 <li class="rightli">DEF</li>
</ul>
<ul>
 <li class="leftli">123</li>
 <li class="leftli">123</li>
 <li class="leftli">123</li>
 <li class="leftli">123</li>
 <li class="rightli">456</li>
</ul>
<ul>
 <li class="leftli">abc</li>
 <li class="leftli">abc</li>
 <li class="leftli">abc</li>
 <li class="leftli">abc</li>
 <li class="rightli">def</li>
</ul>
<ul>
 <li class="b-leftli">ABC</li>
 <li class="b-leftli">ABC</li>
 <li class="b-leftli">ABC</li>
 <li class="b-leftli">ABC</li>
 <li class="b-rightli">DEF</li>
</ul>
</div>
</body>
</html>

细线表格的几种做法(css)

(一)效果一般
  • y490884700
  • y490884700
  • 2012年07月19日 17:22
  • 4112

DIV+Table实现复杂表单

使用jsp页面实现一个报告的录入,由于表单比较复杂,而项目进度又比较紧,所以就没有花时间去研究一些专门做报告的表单工具,凑合着使用DIV+table也算是完成了任务。页面样例如下图:JavaScrip...
  • Canyoung
  • Canyoung
  • 2010年11月04日 20:46
  • 2199

详解移动端页面细线实现方案

很多注重用户体验的移动端web设计都会使用细线,在PC端也就是简单的一句: border-bottom:1px solid #e0e0e0; 在PC端web上只要简单的使用border-bottom属...
  • yuhk231
  • yuhk231
  • 2017年01月02日 10:36
  • 2703

HTML,使用div+css实现自适应table布局

简单的table布局:     1:使用 box-sizing以便于使用100%;     2:每个cell使用float:left,在行末尾使用 clear:both 以使整个行有高度和宽度 ...
  • okkk
  • okkk
  • 2016年07月30日 18:16
  • 4979

DIV+CSS布局和Table布局对比

转自:http://www.toutiao.com/i6429288122151862786/ 虽然目前大多数网页都是采用的DIV+CSS布局的方式,但是也有少数的老式Web网页采用的是Ta...
  • shuidinaozhongyan
  • shuidinaozhongyan
  • 2017年06月14日 19:42
  • 632

html中table边框细线

很多时候,我们做gou't
  • u011687037
  • u011687037
  • 2014年07月23日 09:54
  • 3744

用div+css实现table效果

            ul        {            list-style: none;            margin: 0;        }        li       ...
  • mattwin
  • mattwin
  • 2008年03月27日 13:27
  • 686

使用DIV+CSS定义的后台管理页面

%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http:...
  • zxzmww
  • zxzmww
  • 2007年09月26日 12:14
  • 1370

DIV+CSS布局和TABLE布局的优缺点讲解

TABLE布局是WEB早期CSS不存在的时候兴起的,是对TABLE标签的不正规使用,Table标签就是表格,是用来显示数据的,而不是用来布局网页的,虽然它有时候布局网页很简单。现在绝大多数的网站都是用...
  • qq_32609883
  • qq_32609883
  • 2015年12月18日 14:19
  • 4299

css设置细线样式的表格

第一种方法:定义table样式table{border:#000 solid; border-width:1px 0 0 1px;}定义td样式td{border:#000 solid; border...
  • wyyfwm
  • wyyfwm
  • 2011年07月22日 13:05
  • 6469
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用DIV+CSS实现传统的只有TABLE才能实现的细线网格
举报原因:
原因补充:

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