首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

以div作为display: Table和display: table -cell不能正常显示

问题:以div作为display: Table和display: table-cell不能正常显示。

回答: 当将div元素的display属性设置为table或table-cell时,它们并不会像table元素或table-cell元素一样正常显示。这是因为div元素本身是一个块级元素,而display属性只是改变了元素的显示方式,并不能改变元素的本质。

display: table和display: table-cell是用于模拟表格布局的CSS属性,但它们只能应用于表格相关的元素,如table、tr、td等。如果将这些属性应用于div元素,浏览器会尝试将其转换为表格相关的元素,但由于div元素的结构和表格元素的结构不同,所以无法正常显示。

如果想要实现类似表格布局的效果,可以考虑使用其他方法,如使用CSS的flexbox布局或grid布局。这些布局方式更加灵活且易于控制,能够满足各种复杂布局的需求。

腾讯云相关产品和产品介绍链接地址:

  • 腾讯云CSS Flexbox布局:https://cloud.tencent.com/document/product/249/32579
  • 腾讯云CSS Grid布局:https://cloud.tencent.com/document/product/249/32580

请注意,以上链接仅为示例,实际使用时应根据具体需求选择适合的腾讯云产品和服务。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

table一样布局div

其实有个简单的方法,使用display:table, display:table-row and display:table-cell 就可以实现,而且高度小的容器会自适应那些高度相对较高的,但是IE不支持这个属性...display:table;   border-collapse:separate;  }  .row {   display:table-row;  }  .row div {   display... } 解释: 1.dispaly:table;让层.equal作为块级元素的表格table显示,也就是将他作为一个表格 2.border-collapse:separate;边框独立,就像表格没有合并单元格以前...3.display:table-row;将.row作为表格行tr显示 4.display:table-cell;将.row的下级div作为表格单元格td显示 5.然后定义宽度 这里还使用了 border-spacing...:10px;来区别几个盒子,正如上面所陈述的,IE下不能正常显示,但是在:Mozilla 1.6, Opera 7.50, Safari 1.2.2, Firefox 0.8, OmniWeb 5b,

1.3K70

css display table-cell

run-in 此元素会根据上下文作为块级元素或内联元素显示table 此元素会作为块级表格来显示(类似 ),表格前后带有换行符。...table-column 此元素会作为一个单元格列显示(类似 ) table-cell 此元素会作为一个表格单元格显示(类似 table-caption 此元素会作为一个表格标题显示...,而它的父元素祖父元素没有定义display:table-rowdisplay:table-cell,那么就会匿名的创建这两个父元素,尽管外观没有任何变化。...display:table-rowdisplay:table-cell。...在兼容各个浏览器的位置高度div垂直居中效果中,middle对象中使用了display:table-cell,它的父对象parent中也显示声明了display:table-cell,否则会匿名创建两个具有此属性的对象

1.4K10
  • css display属性的值及用法_css clear作用

    CSS 2.1 */ display: inline-block; display: table; display: inline-table; display: table-cell; display...display: list-item 此属性默认会把元素作为列表显示,要完全模仿列表的话还需要加上 list-style-position,list-style-type 111111...详情可以查看 张鑫旭老师的博客 Tip: inline-block会形成一个BFC display: table table 此元素会作为块级表格来显示(类似table),表格前后带有换行符。...所有的表格元素将会自动在自身周围生成所需的匿名table对象,使其符合table/inline-tabletable-row、table-cell的三层嵌套关系。...,所以应该是不能使用的,支持度全无 display: flex flex是一种弹性布局属性 注意,设为Flex布局以后,子元素的float、clearvertical-align属性将失效。

    2.4K10

    【CSS】布局属性:display

    inline-table 此元素会作为内联表格来显示(类似 ),表格前后没有换行符 table-row-group 此元素会作为一个或多个行的分组来显示(类似 ) table-header-group...此元素会作为一个或多个行的分组来显示(类似 ) table-footer-group 此元素会作为一个或多个行的分组来显示(类似 ) table-row 此元素会作为一个表格行显示...(类似 ) table-column-group 此元素会作为一个或多个列的分组来显示(类似 ) table-column 此元素会作为一个单元格列显示(类似 )...table-cell 此元素会作为一个表格单元格显示(类似 table-caption 此元素会作为一个表格标题显示(类似 ) 示例汇总:试一试 <html...} .table-column {display: table-column} .table-cell {display: table-cell} .table-caption {display: table-caption

    1.4K20

    div构建table

    要使用此参数,对象必须:after及:before 伪元素一起使用 inline-table :将表格显示为无前后换行的内联对象或内联容器 list-item :将块对象指定为列表项目。...并可以添加可选项目标志 run-in :分配对象为块对象或基于内容之上的内联对象 table :将对象作为块元素级的表格显示 table-caption :将对象作为表格标题显示 table-cell...:将对象作为表格单元格显示 table-column :将对象作为表格列显示 table-column-group :将对象作为表格列组显示 table-header-group :将对象作为表格标题组显示...table-footer-group :将对象作为表格脚注组显示 table-row :将对象作为表格行显示 table-row-group :将对象作为表格行组显示 2、代码段如下 #main {...display : table ; border-collapse : collapse ; } #nav { display : table-cell ; width

    1.1K20

    div构建table

    要使用此参数,对象必须:after及:before 伪元素一起使用 inline-table :将表格显示为无前后换行的内联对象或内联容器 list-item :将块对象指定为列表项目。...并可以添加可选项目标志 run-in :分配对象为块对象或基于内容之上的内联对象 table :将对象作为块元素级的表格显示 table-caption :将对象作为表格标题显示 table-cell...:将对象作为表格单元格显示 table-column :将对象作为表格列显示 table-column-group :将对象作为表格列组显示 table-header-group :将对象作为表格标题组显示...table-footer-group :将对象作为表格脚注组显示 table-row :将对象作为表格行显示 table-row-group :将对象作为表格行组显示 2、代码段如下 #main {...display : table ; border-collapse : collapse ; } #nav { display : table-cell ; width

    1.2K30

    【前端】CSS : display

    : inline-block既具有block的宽高特性又具有inline的同行元素特性(CSS 2.1 新增) table作为块级表格来显示(类似table),表格前后带有换行符。...block 设置元素为块状元素 如果不指定宽高,默认会继承父元素的宽度,并且独占一行,即使宽度有剩余也会独占一行,高度一般子元素撑开的高度为准,当然也可以自己设置宽度高度。...span block list-item 会把元素作为列表显示 例: .display3 { display: list-item; } <span class="<em>display</em>3...<em>table</em> <em>作为</em>块级表格来<em>显示</em>(类似<em>table</em>),表格前后带有换行符。...; } .<em>display</em>5_td { padding: 5px; <em>display</em>: <em>table</em>-<em>cell</em>; border: 1px solid; } <<em>div</em> class="display5

    1.8K10

    能用HTMLCSS解决的问题就不要使用JS!

    鼠标悬浮时显示 鼠标悬浮的场景十分常见,例如导航的菜单: 以及在《Google地图开发总结》一文提到的,marker详情框的显示: 一般要把隐藏的东西如菜单作为hover目标的子元素或者相邻元素,才方便用...第二种办法是借助table的自适应特性 ,每个div都是一个td,td肯定是等高的,html结构不变,CSS改一下: .wrapper{    display: table; border-spacing...: 20px;  /* td间的间距*/} .wrapper > div {    display: table-cell; width: 1000px;         /*设置很大的宽度,table...例如在小于500px时,每一列占满一行,那么只要把display: table-cell覆盖掉就好了: @media (max-width: 500px){ .wrapper{        display...span class="tr">    column 3    column 4 在大屏小屏时,tr是不显示的,而在中屏时,tr

    3K20

    能用HTMLCSS解决的问题就不要使用JS

    同时menu自已本身hover的时候也要显示,否则鼠标一离开导航的时候,菜单就消失了: .menu:hover{ display: list-item; } 这里会有一个小问题,即menu导航需要挨着一起...第二种办法是借助table的自适应特性 ,每个div都是一个td,td肯定是等高的,html结构不变,CSS改一下: .wrapper{ display: table; border-spacing...: 20px; /* td间的间距*/}.wrapper > div { display: table-cell; width: 1000px; /*设置很大的宽度,table...例如在小于500px时,每一列占满一行,那么只要把display: table-cell覆盖掉就好了: @media (max-width: 500px){ .wrapper{ display...span class="tr"> column 3 column 4 在大屏小屏时,tr是不显示的,而在中屏时,tr

    3.8K40

    自适应宽度元素单行文本省略用法探究

    1)table元素(或displaytable元素)内单行文本省略,需要给table元素(或displaytable元素)添加table-layout:fixed样式 设置为table布局元素的子元素单行文本省略不起作用..., .demo .right{ display:table-cell; } .demo .left{ width:120px; min-width:120px... 这个实例中,demo元素设置为dispaly:table,其子元素leftright设置为display:table-cell...为了使元素right内的h2p的文本省略样式起作用,必须在元素demo(即设置display:table的元素)添加一条样式table-layout:fixed,这个解决方式同样适用于table元素。...2)单行文本省略元素及其父元素的width属性都无关 3)table元素(或displaytable元素)内单行文本省略,需要给table元素(或displaytable元素)添加table-layout

    2.5K30

    冷门布局方法 tabel-cell 的可行性研究

    display:table-cell 属性简介 displaytable-cell;会使元素表现的类似一个表格中的单元格 td,利用这个特性可以实现文字的垂直居中效果。...同时它也会破坏一些 CSS 属性,使用 table-cell 时最好不要与 float 以及 position: absolute 一起使用,设置了 table-cell 的元素对高度宽度高度敏感,对...对高度宽度高度敏感。 不要对 displaytable-cell 使用百分比设置宽度高度。 下面介绍几个 table-cell 的应用: 1.... class="table-wrap">  我是一大推文字,我想要垂直居中,这是省略这是省略这是省略这是省略 关键在于设置了 display:cell; 后,vertical-align...诡异的百分比宽高 使用 table-cell 有一个让人很抓狂的地方,那就是他的宽高是不能使用百分比设置的,具体的原因我一直没有找到,只能理解为这是这个属性的特性。希望有知道的老铁告知一声。

    64820
    领券