display:table、display:table-row和display:table-cell的用法

display:table和display:table-cell的用法:

建议:尽可能的手写代码,可以有效的提高学习效率和深度。

display属性的table和table-cell属性值不怎么常用,主要是浏览器的兼容性并不好,因为万恶的IE6和IE7还有相当一部分用户在使用,不过并非没有它们展露头角的机会,在display:table-cell的用法简介中已经对display:table-cell做了简单的介绍,但是感觉不够全面,下面就集合实例稍稍全面的介绍一下。

三个属性值的基本概念:

1.table:指定对象作为块元素级的表格,类同于html标签<table>。

2.table-row:指定对象作为表格行,类同于html标签<tr>。

3.table-cell:指定对象作为表格单元格,类同于html标签<td>。

从以上属性值的基本概念定义可以看出,它们可以打造一个非table相关标签建立的表格效果,代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
<style type="text/css">
.table{
  display:table;
}
.tr{
  display:table-row;
  width:200px;
  height:200px;
}
.td{
  display:table-cell;
  width:100px;
  height:100px;
  background-color:green;
  border:1px solid red;
}
tr{
  width:200px;
  height:200px;
}
td{
  width:100px;
  height:100px;
  background-color:green;
  border:1px solid red;
}
</style>
</head>
<body>
<div class="table">
  <div class="tr">
    <div class="td"></div>
    <div class="td"></div>
  </div>
</div>
<br/>
<table cellpadding="0" cellspacing="0">
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>
</body>
</html>

从以上代码的表现来看,为div添加了相关属性值之后,差不多完全具有了表格的相关特性,当然上面的演示并不能够完全说明表格所具有的相关特性,以上代码只是说明三个属性值的作用。到这里可能会有朋友提出这样的疑问:在众多的实际应用中并没有完整的定义类似表格这样的层次关系,而是往往只有display:table-cell,这是因为,如果一个对象具有display:table-cell,而它的父元素和祖父元素没有定义display:table-row和display:table-cell,那么就会匿名的创建这两个父元素,尽管外观没有任何变化。代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
<style type="text/css">
.parent{
  width:200px;
  height:200px;
  background-color:green;
  display:table-cell;
  vertical-align:middle;
}
.children{
  width:60px;
  height:60px;
  background-color:red;
  font-size:12px;
}
</style>
</head>
<body>
<div class="parent">
   <div class="children">蚂蚁部落</div>
</div>
</body>
</html>

以上代码中,父元素中具有display:table-cell,但是它并没有父元素或者祖父元素定义display:table-row和display:table-cell。这个时候就会匿名创建两个具有此属性的对象,当然外观是看不出来的。以上代码中之所以子元素可以垂直居中对齐,是因为td元素具有valign属性,而vertical-align:middle只会在具有valign属性的对象中生效,所以上面代码就成功实现了垂直居中效果。在兼容各个浏览器的位置高度div垂直居中效果中,middle对象中使用了display:table-cell,它的父对象parent中也显示声明了display:table-cell,否则会匿名创建两个具有此属性的对象,middle对象的尺寸就会根据内容自适应了,这样在标准浏览器中就不能达到垂直居中效果了。

原文地址是:http://www.51texiao.cn/div_cssjiaocheng/2015/0501/504.html

时间: 2024-11-05 20:39:56

display:table、display:table-row和display:table-cell的用法的相关文章

mysqldump导出报错&quot;mysqldump: Error 2013: Lost connection to MySQL server during query when dumping table `file_storage` at row: 29&quot;

今天mysql备份的crontab自动运行的时候,出现了报警,报警内容如下 mysqldump: Error 2013: Lost connection to MySQL server during query when dumping table `file_storage` at row: 29 mysqldump: Couldn't execute 'show table status like 'property'': MySQL server has gone away (2006)

alter table table_name enable row movement

Row movement 从字面意思解释为行移动.默认情况下,oracle数据块中的一行其生命周期内是不会发生移动的,即其rowid不会发生改变. 但是在某些情景下,我们希望行的rowid可以发生变化,这时候我们就需要启动表的row movement特性. 启用row movement特性,使用如下语句: Alter table table_name enable row movement; 通查在三种情景下,需要启用row movement. 1:分区表 当我们允许分区表的分区键是可更新的时候

thinkphp中SQLSTATE[42S02]: Base table or view not found: 1146 Table错误解决方法

随手记录下今天在thinkphp3.2.3中遇到的错误SQLSTATE[42S02]: Base table or view not found: 1146 Table 'test.file_info' doesn't exist,之前用pdo连接数据库一直没有问题,今天突然发现报了上述错误,查看了别人的解决方法,都没有解决,后来看了下之前的表名都是小写的,我现在的表名是"file_Info",改为"file_info"后就不报异常了

table与tr td样式重叠 table样式边框变细

<table style="border:1px solid red;border-collapse:collapse;"> border-style 的属性 值 描述 none 定义无边框. hidden 与 "none" 相同.不过应用于表时除外,对于表,hidden 用于解决边框冲突. dotted 定义点状边框.在大多数浏览器中呈现为实线. dashed 定义虚线.在大多数浏览器中呈现为实线. solid 定义实线. double 定义双线.双线

查找idt table 所對應的page table in Linux

#include <linux/kernel.h> #include <linux/module.h> #include <linux/delay.h> #include <linux/string.h> #include <linux/jump_label.h> #include <linux/types.h> #include <asm/pgtable.h> #include <asm/pgtable_64.h&

Linux下安装oracle数据库提示DISPLAY not set. Please set the DISPLAY and try again。

错误如下: Ignoring required pre-requisite failures. Continuing... Preparing to launch Oracle Universal Installer from /tmp/OraInstall2015-01-29_03-14-51AM. Please wait ... DISPLAY not set. Please set the DISPLAY and try again. Depending on the Unix Shell

create table #temptable 临时表 和 declare @bianliang table ()表变量

create table #temptable 临时表 和 declare @bianliang table ()表变量 在开发过程中,经常会遇到使用表变量和本地临时表的情况.下面是对二者的一个介绍: 1. 为什么要使用表变量 表变量是从2000开始引入的,微软认为与本地临时表相比,表变量具有如下优点:  a.与其他变量的定义一样,表变量具有良好的定义范围,并会被自动清除:  b.在存储过程中使用表变量会减少存储过程重新编译的发生:  c.表变量需要更少的锁请求和日志资源:  d.可以在表变量上

table新增一行并循环获取table内值

简单介绍 table新增一行,并获取table标签中所有td的值,通过js将其组装成json格式传给后端存储数据库. 实际操作 1.首先需要在页面html创建talbe标签内容,定义th标题 2.给包含td的tr增加一个属性,例如:type="subdata" 3.在table标签下增加一个按钮,并给其增加一个click事件 html内容 4.在js文件中进行click事件内容的编写,按照th标题数量进行td的拼接,也增加了一个删除行功能 js内容 5.js使用each来进行table

Flink 报错 &quot;Could not find a suitable table factory for &#39;org.apache.flink.table.factories.StreamTableSourceFactory&#39; in the classpath&quot;

转自: https://www.cnblogs.com/Springmoon-venn/p/10570056.html 先上代码: table = tablexx.select('*).tablexx.groupBy('x).select('x, xx.count ) tableEnvironment // declare the external system to connect to .connect( new Kafka() .version("0.10") .topic(&q

有关table布局时tr 属性display:block显示布局错乱

display:block display:block是可以把非块级元素强制转换为块级元素显示,如内嵌元素span,原来不支持设置宽高,宽度是由内容撑开的; display:table-row table-row:指定对象作为表格行,类同于html标签<tr> 问题如下 当表格为多列的情况下,属性为"display:block"行的内容宽度仅与第一列宽度相同,也就是说无论你使colspan的属性值为多少,剩余列的空间都不进行解析 新闻的内容只能占一列的宽度 当将displa