首页
Web开发
Windows程序
编程语言
数据库
移动开发
系统相关
微信
其他好文
会员
首页
>
其他好文
> 详细
关于table
时间:
2015-08-30 22:36:40
阅读:
164
评论:
0
收藏:
0
[点我收藏+]
标签:
# table 属性bgcolor:设置表格的背景颜色 #
<!--属性bgcolor:设置表格的背景颜色-->
<table border="1" bgcolor="red">
<tr>
<td>
测试数据
</td>
</tr>
<tr>
<td>
测试数据
</td>
</tr>
</table>
<!--属性cellpadding:设置表格内容与边框的距离,如果设置了padding:0时,则无效,产生冲突-->
<table border="1" bgcolor="red" cellpadding="60">
<tr>
<td>
测试数据
</td>
</tr>
<tr>
<td>
测试数据
</td>
</tr>
</table>
# table属性cellspacing:设置列间距
<!--属性cellspacing:设置列间距 -->
<table border="1" bgcolor="red" cellspacing="10">
<tr>
<td>
测试数据
</td>
<td>测试数据</td>
</tr>
<tr>
<td>
测试数据
</td>
<td>
测试数据
</td>
</tr>
</table>
# table CSS 样式中使用border-spacing 来设置相邻单元格边框之间的距离
<!--CSS使用border-spacing 来设置相邻单元格边框之间的距离-->
<table border="1" bgcolor="red" style="border-spacing: 20px">
<tr>
<td>
测试数据
</td>
<td>测试数据</td>
</tr>
<tr>
<td>
测试数据
</td>
<td>
测试数据
</td>
</tr>
</table>
# table CSS 样式中使用border-collapse合并一个单一边框 #
<!-- CSSborder-collapse合并一个单一边框 -->
<table border="1" style="border-collapse: collapse" bgcolor="red">
<tr>
<td>
测试数据
</td>
<td>测试数据</td>
</tr>
<tr>
<td>
测试数据
</td>
<td>
测试数据
</td>
</tr>
</table>
# table CSS 样式中使用
table-layout:fixed;
固定宽度 #
<!--table-layout:fixed;固定宽度为200,里面字体自动换行-->
<table border="1" style="table-layout:fixed;width:200px;border-collapse: collapse" bgcolor="red">
<tr>
<td>
测试数据测试数据测试数据测试数据测试数据
</td>
<td>测试数据测试数据测试数据测试数据</td>
</tr>
<tr>
<td>
测试数据测试数据
</td>
<td>
测试数据测试数据测试数据
</td>
</tr>
</table>
# table CSS 样式中使用
table-layout:auto;相对宽度
#
<!--table-layout:auto;相对宽度,自适应-->
<table border="1" style="table-layout:auto;width:200px;border-collapse: collapse" bgcolor="red">
<tr>
<td>
测试数据测试数据测试数据测试数据测试数据
</td>
<td>测试数据测试数据测试数据测试数据</td>
</tr>
<tr>
<td>
测试数据测试数据
</td>
<td>
测试数据测试数据测试数据
</td>
</tr>
</table>
DISPLAY用法:
# 对span设置宽高是无效的 #
<span style="border:1px solid red;height: 100px;width: 100px">测试数据</span>
<span style="border:1px solid red;height: 100px;width: 100px">测试数据</span>
<br/>
<br/>
#把span转换成块级元素,就可以对其设置宽和高,可以看到已自动换行 #
<span style="border:1px solid red;display: block;height: 100px;width: 100px">测试数据</span>
<span>测试数据</span>
<span>测试数据</span>
<div style="border:1px solid red;height: 100px;width: 100px">测试数据</div>
<br/>
# 把div转换成内嵌元素,不能再对其设置宽和高 #
<div style="display: inline;height: 100px">测试数据</div>
<div>测试数据</div>
<!--把div转换成内嵌元素,但是还是具有一些块级元素的功能,比如宽和高-->
<div style="border:1px solid red;display: inline-block;height: 100px">测试数据</div>
# 关于position #
<div style="border:1px solid black;height: 500px;width: 500px">
<!--使用position:relative;是相对于自身进行定位,还是在常规流里,不会对其他元素造成影响-->
<div style="
position:relative;
border:1px solid red;background-color:blue;height: 100px;width: 100px"></div>
<div style="border:1px solid black;height: 100px;width: 100px"></div>
<!--使用position:absolute;使div拖离常规流,以离他最近的父级元素拥有position为准-->
<div style="z-index:1;
position:absolute;
border:1px solid black;background-color:blueviolet;height: 100px;width: 300px"></div>
<div style="z-index:2;border:1px solid black;height: 200px;width: 100px"></div>
</div>
关于table
标签:
原文地址:http://www.cnblogs.com/muqnly/p/4771685.html
踩
(
0
)
赞
(
0
)
举报
评论
一句话评论(
0
)
登录后才能评论!
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
更多
分布式事务
2021-07-29
OpenStack云平台命令行登录账户
2021-07-29
getLastRowNum()与getLastCellNum()/getPhysicalNumberOfRows()与getPhysicalNumberOfCells()
2021-07-29
【K8s概念】CSI 卷克隆
2021-07-29
vue3.0使用ant-design-vue进行按需加载原来这么简单
2021-07-29
stack栈
2021-07-29
抽奖动画 - 大转盘抽奖
2021-07-29
PPT写作技巧
2021-07-29
003-核心技术-IO模型-NIO-基于NIO群聊示例
2021-07-29
Bootstrap组件2
2021-07-29
友情链接
兰亭集智
国之画
百度统计
站长统计
阿里云
chrome插件
新版天听网
关于我们
-
联系我们
-
留言反馈
© 2014
mamicode.com
版权所有 联系我们:gaon5@hotmail.com
迷上了代码!