文档章节

用DIV轻松实现自适应Table

奋斗的麻雀
 奋斗的麻雀
发布于 2015/11/13 17:15
字数 232
阅读 93
收藏 0
<html>
<body>
<div style="display:table;border:1px red solid;width:100%;">
<div style="display:table-caption;text-align:center;">My table</div>
<div style="display:table-row;">
<div style="display:table-cell;border-bottom:1px red solid;border-right:1px red solid;">1</div>
<div style="display:table-cell;border-bottom:1px red solid;border-right:1px red solid;">2</div>
<div style="display:table-cell;border-bottom:1px red solid;border-right:0px red solid;">3</div>
</div>
<div style="display:table-row;">
<div style="display:table-cell;border-bottom:1px red solid;border-right:1px red solid;">1</div>
<div style="display:table-cell;border-bottom:1px red solid;border-right:1px red solid;">2</div>
<div style="display:table-cell;border-bottom:1px red solid;border-right:0px red solid;">3</div>
</div>
<div style="display:table-row;">
<div style="display:table-cell;border-bottom:1px red solid;border-right:1px red solid;">1</div>
<div style="display:table-cell;border-bottom:1px red solid;border-right:1px red solid;">2</div>
<div style="display:table-cell;border-bottom:1px red solid;border-right:0px red solid;">3</div>
</div>
<div style="display:table-row;">
<div style="display:table-cell;border-bottom:0px red solid;border-right:1px red solid;">1</div>
<div style="display:table-cell;border-bottom:0px red solid;border-right:1px red solid;">2</div>
<div style="display:table-cell;border-bottom:0px red solid;border-right:0px red solid;">3</div>
</div>
</div>
</body>

</html>


© 著作权归作者所有

奋斗的麻雀

奋斗的麻雀

粉丝 10
博文 18
码字总数 2542
作品 1
西安
技术主管
私信 提问
移动端css布局:不规则按钮与自适应table布局导航栏

前几天在w3cplus上看了关于css3的clip-path剪裁熟悉,当时就被这个东西吸引了,想到以前如果要做不规则图形,要么直接用图片,要么要用border加translate去制作三角形再拼起来。而且这些做法...

hyh2015
2016/07/31
614
0
三种三栏网页宽度自适应布局方法,转载大神的,适合收藏

一、前言 在如今各个分辨率显示器N足鼎立的时期,页面采用流动性布局(亦可称自适应布局)不失为一个好选择。当然,具体实现不是那么容易,需要一定的css功力和实践经验。本文不讲细节,只讲...

曾杨
2014/03/12
735
0
css揭秘实战技巧 - 结构与布局[六]

全目录 本系列文章,主要是围绕css3属性,实现我们常见的各种效果,这些效果都是我们实战开发中经常可以用到的效果: css揭秘实战技巧- 背景与边框 [一] css揭秘实战技巧- 形状 [二] css揭秘...

沉默抒怀者
05/06
0
0
DWZ框架的HTML扩展

DWZ框架HTML扩展 支持HTML扩展方式来调用DWZ组件 Ajax链接扩展使用方法 示例: 提示窗口 dialog链接扩展使用方法 Html标签扩 展方式示例: 弹出窗口 或 打开窗口一 JS调用方式示例: $.pdialog...

张慧华
2010/04/27
4.2K
0
CSS制作水平垂直居中对齐各种方法总结

标签: 杂谈 分类: 网页前端 方法一: 这种方法用来实现单行垂直居中是相当的简单的,你只要保证元素内容是单行,并且其高度是固定不变的,你只要将其“line-height”设置成和“height”值一...

未央花开
2014/04/01
49
0

没有更多内容

加载失败,请刷新页面

加载更多

设计模式之访问者模式

定义 Represent an operation to be performed on the elements of an object structure. Visitor lets you define a new operation without changing the classes of the elements on which......

陈年之后是青葱
昨天
10
0
PhotoShop 高级应用 : 分层云彩 - 简单闪电效果

1.创建黑白渐水平渐变图层 2.选择滤镜选项卡: 渲染--->分层云彩功能 3.将滤镜-云彩效果渲染后的图层进行反相操作 【此时出现闪电效果】 6.调整色阶,使得闪电效果更明显 7.创建剪贴蒙版:色...

东方墨天
昨天
11
0
三种实现Android主界面Tab的方式

三种实现Android主界面Tab的方式 https://www.cnblogs.com/caobotao/p/5103673.html

shzwork
昨天
11
0
java8-Optional类

背景 NPE问题,100%的Java程序员都碰到,并且曾经是心中的痛。 1965年英国TonyHoare引入了Null引用,后续的设计语言包括Java都保持了这种设计。 一个例子 业务模型 Person 有车一族, 有Car...

春天springcarter
昨天
11
0
py 登录github时token以及cookie的应用

import requestsfrom bs4 import BeautifulSoup## 获取tokenr1 = requests.get('https://github.com/login')s1 = BeautifulSoup(r1.text,'html.parser')token = s1.find(name='input',......

子枫Eric
昨天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部