css模拟表格效果

最新推荐文章于 2024-03-05 19:30:22 发布
最新推荐文章于 2024-03-05 19:30:22 发布
阅读量410 收藏
点赞数
分类专栏： CSS 文章标签： css firefox opera ie 测试

 

  1. 模拟表格效果，在IE6,IE7,IE8,firefox,Opera下测试通过

    虽然不推荐用这种方式来模拟表格,但是确实可以做到.

  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
  3. < html  xmlns ="http://www.w3.org/1999/xhtml" >   
  4. < head >   
  5. < meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"  />   
  6. < title > DIV+CSS模拟表格效果 - by koyoz.com</ title >   
  7. < style  type ="text/css" >   
  8. * {margin:0;padding:0}   
  9. #main {margin:100px 0 0 200px}   
  10. #main ul {width:520px;height:165px;list-style:none}   
  11. #main li {border-left:1px solid #ccc;border-top:1px solid #ccc;float:left;width:102px;height:33px;text-align:center;line-height:33px}   
  12. #main li.b {border-bottom:1px solid #ccc}   
  13. #main li.r {border-right:1px solid #ccc}   
  14. </ style >   
  15. </ head >   
  16.   
  17. < body >   
  18.     < div  id ="main" >   
  19.         < ul >   
  20.             < li > 11</ li >   
  21.             < li > 11</ li >   
  22.             < li > 11</ li >   
  23.             < li > 11</ li >   
  24.             < li  class ="r" > 11</ li >   
  25.             < li > </ li >   
  26.             < li > </ li >   
  27.             < li > </ li >   
  28.             < li > </ li >   
  29.             < li  class ="r" > 11</ li >   
  30.             < li > </ li >   
  31.             < li > </ li >   
  32.             < li > </ li >   
  33.             < li > </ li >   
  34.             < li  class ="r" > 11</ li >   
  35.             < li > </ li >   
  36.             < li > </ li >   
  37.             < li > </ li >   
  38.             < li > </ li >   
  39.             < li  class ="r" > 11</ li >   
  40.             < li  class ="b" > </ li >   
  41.             < li  class ="b" > </ li >   
  42.             < li  class ="b" > </ li >   
  43.             < li  class ="b" > </ li >   
  44.             < li  class ="b r" > 11</ li >   
  45.         </ ul >   
  46.     </ div >   
  47. </ body >   
  48. </ html >

 

南三方
关注
专栏目录
利用CSS仿Excel表格的效果
09-12
利用CSS仿Excel表格的效果
div+css模拟表格效果代码
10-30
通过使用DIV和CSS模拟表格效果，可以避免使用传统的HTML表格标签（如、、等）来布局页面，这在当前的Web开发中越来越受到推崇。因为使用DIV和CSS布局具有更好的灵活性和可控性，也更加符合Web标准，并且能够提供更好...
Css+JS模拟实现可编辑的表格
weixin_34161029的博客
12-19 312
表格在未编辑状态和编辑状态，需要定义两个不同的样式。 比如未编辑状态是lable的样式，两边有两个括号[]，表示该表格可以编辑；编辑中的表格则表示成一个input框，可以输入。 基本思路就是，在表格中直接放可输入的input标签，在未编辑的时候，利用css样式，把input标签模拟成不可编辑的lable样式。 实现代码。 CSS .edit-marker { ...
CSS 仿Excel表格功能
G19931112的博客
08-10 262
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head&gt...
纯css实现表格
最新发布
leoz1的博客
03-05 758
【代码】纯css实现表格。
css 模拟表格斜线
09-27
CSS模拟表格斜线的知识点主要涉及边框、定位以及绝对定位等CSS技术。下面详细说明如何使用CSS来模拟实现表格的对角线效果： 首先，我们知道HTML中的表格（table）是由多个单元格（td、th）组成的，如果要为表格添加...
漂亮的CSS立体表格效果特效代码
03-20
标题中的“漂亮的CSS立体表格效果特效代码”是指利用CSS（层叠样式表）技术来创建具有立体感的表格效果。CSS是一种用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档样式的语言，它允许我们将样式与结构分离，...
用div css模拟表格对角线
01-19
这只是探讨一种CSS模拟表格对角线的用法，实际在工作中可能觉得这样做有点小题大作，这不是本主题讨论的重点。如果对此深以为然的朋友，请一笑过之. 首先声明： 这只是探讨一种CSS模拟表格对角线的用法，实际在工作...
如何用CSS定义表格与模拟表格
zgqtxwd的专栏
04-30 701
<!--google_ad_client = "pub-2947489232296736";/* 728x15, 创建于 08-4-23MSDN */google_ad_slot = "3624277373";google_ad_width = 728;google_ad_height = 15;//--><script type="text/javascript"
[免费-原创] 网页中模拟Excel CSS样式
03-18
利用CSS可以制作出出众的效果，不信你来看看这张网页。 用纯CSS模拟的Excel表格，没有是用任何图片。 [colin3dmax]为大家提供更多免费资源
html+css 通过div模拟出一个表格样式，优化多个边框导致的宽度计算问题
lazy_tomato的博客
11-07 298
/margin;padding;height;.boxwidth;display;flex-wrap;;margin;width;border;margin;height;
html css表格编辑,Css+JS模拟实现可编辑的表格
weixin_28966407的博客
06-15 638
表格在未编辑状态和编辑状态，需要定义两个不同的样式。比如未编辑状态是lable的样式，两边有两个括号[]，表示该表格可以编辑；编辑中的表格则表示成一个input框，可以输入。基本思路就是，在表格中直接放可输入的input标签，在未编辑的时候，利用css样式，把input标签模拟成不可编辑的lable样式。实现代码。CSS.edit-marker {position: relative;}.edit...
css布局Excel,CSS 仿Excel表格功能
weixin_35141129的博客
08-04 844
Spreadsheet form - www.codefans.nettable.formdata{border:1px solid #5F6F7E;border-collapse:collapse;}table.formdata th{border:1px solid #5F6F7E;background-color:#E2E2E2;color:#000000;text-align:left;f...
CSS display:table属性用法解析
weixin_34007879的博客
03-11 212
本节和大家重点讨论一下CSS display:table的使用，当IE8发布时，它将支持很多新的CSS display属性值，包括与表格相关的属性值，CSS表格能够解决所有那些我们在使用绝对定位和浮动定位进行多列布局时所遇到的问题。 CSS display:table属性 当IE8发布时，它将支持很多新的CSS display属性值，包括与表格相关的属性值：CSS dis...
html 模仿表格的样式,div+css模拟表格效果代码
weixin_35942339的博客
06-18 539
非常不错的模拟表格效果代码，需要注意的是 这类代码一般都是通过宽度控制，大家注意计算好DIV+CSS模拟表格效果 - by koyoz.com* {margin:0;padding:0}#main {margin:100px 0 0 200px}#main ul {width:520px;height:165px;list-style:none}#main li {border-left:1px ...
css-flex布局模仿表格小例子
Li-的博客
04-23 1517
闲来无事顺手写了个表格小栗子，很简陋，大概搭了一下壳。 效果图： const data=[//定义数据 { key:1, name:'胡萝卜', other:[ { chengpin:'胡萝卜块sdfsv的好几个上课表达方式看地方很多风格化法国发挥规范化 ', danwei:20, beizhu:'1cmdsf' }, { chen
仿Excel表格
Rookie
03-22 1132
首先可以点击右边的连接来体验一下最终的效果：Excel表格 这里我罗列出我主要实现的五大功能： 行列以及cell的hover和click效果 增删行列 resize功能 鼠标选择效果 支持编辑 下面我给出一些主要功能以及棘手问题的解决方案： 1.表格的设计： 采取table布局天生与Excel相匹配。 2.外观样式的设计： 用定位技术来确定两个中心div（这两div是父子关系），一个div固定大...
CSS圆角表格实现技巧：无图片效果示例
本文档主要介绍了如何使用CSS样式来创建圆角表格，以实现网页特效。CSS（Cascading Style Sheets）是一种用于描述HTML或XML（包括如SVG、XHTML等）文档的呈现方式的语言，它允许开发者控制网页的布局、颜色、字体...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值