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

为什么我的显示器没有:table-cell元素填充可用空间?

在CSS布局中,:table-cell元素的填充空间取决于其父元素的布局方式。如果父元素没有正确地设置为display: table,那么:table-cell元素将无法正常工作。

以下是一些建议,以确保:table-cell元素正确填充可用空间:

  1. 确保父元素的display属性设置为table
  2. 确保:table-cell元素的display属性设置为table-cell
  3. 如果需要,可以为父元素设置widthheight属性,以确保其具有足够的空间来容纳:table-cell元素。
  4. 如果需要,可以为:table-cell元素设置widthheight属性,以确保其具有足够的空间来容纳其内容。

以下是一个简单的示例,演示了如何使用:table-cell元素正确填充可用空间:

代码语言:html
复制
<!DOCTYPE html>
<html>
<head><style>
.table {
  display: table;
  width: 100%;
  height: 100%;
}

.table-cell {
  display: table-cell;
  width: 50%;
  height: 50%;
  border: 1px solid black;
}
</style>
</head>
<body>

<div class="table">
  <div class="table-cell">Cell 1</div>
  <div class="table-cell">Cell 2</div>
</div>

</body>
</html>

在这个示例中,我们使用:table-cell元素创建了一个表格布局,其中两个单元格占据了50%的可用空间。我们还为父元素设置了widthheight属性,以确保其具有足够的空间来容纳:table-cell元素。

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

相关·内容

CSS理解之margin

以上两个例子是比较常见没有设置宽高也会自动填充所在容器。 若刚才两个例子,如果设置了width或heigth,自动填充特性就会被覆盖。...上图宽度从填满整个所在容器到宽度500px,这就产生了剩余空间,图中剩余空白部分空间width=整个容器宽度-500px,而margin auto 就是 为了填充这个空白尺寸设计,这就是margin...因为图片是inline水平,它占据空间没有撑满整个容器,如果没有设置宽度值。所以它就不满足margin auto 用来填充剩余空间条件,因为他根本就没有剩余空间。...这时我们再把li宽度设置为计算好386.66666px,就可以实现没有间隙两端对齐。主要利用了margin负值增加它空间。...但是对替换元素设置table-cell是可以发生作用,但平时我们不会给替换元素设置table-cell,这是没有任何意义,所以记住这点就行。

1.7K20

CSS BFC实现多栏自适应布局

一、开篇之言 要说web上实现两栏自适应布局方法,一双手都数不过来。不知大家有没有细想过,为什么这些方法可以实现自适应布局呢?...这就是我们常说浮躁,保持一颗谦逊心,细细阅读,你会发现,其中一定有你所没有关注过地方,所谓三人行必有师。没错,这句话就是写给你看,同时也是自我内省与监督。...BFC元素家族与自适应布局面面观 理论上,任何BFC元素和浮动搞基时候,都可以实现自动填充自适应布局。...大家应该知道,IE6/IE7浏览器下,block水平元素设置display:inline-block元素还是block水平,也就是还是会自适应容器可用宽度显示。...因此,如果我们把display:table-cell这个BFC元素宽度设置很大,比方说3000像素。那其实就跟block水平元素自动适应容器空间效果一模一样了。

1.5K40
  • 第213天:12个HTML和CSS必须知道重点难点问题

    这个还是容易被忽视,浮动也是一个大坑,有很多细节。 这12个知识点是个人认为,下面我们就来看看这12个知识点。 1.怎么让一个不定宽高 DIV,垂直水平居中?...注意 relative 移动后元素在原来位置仍占据空间。 **absolute:绝对定位。...取值:left、right、both 3.2 父元素高度塌陷问题 为什么要清除浮动,父元素高度塌陷 解决父元素高度塌陷问题:一个块级元素如果没有设置height,其height是由子元素撑开。...像素 px 是相对于显示器屏幕分辨率而言,是一个虚拟长度单位,是计算 机系统数字化图像长度单位,如果 px 要换算成物理长度,需要指定精度 DPI。...空元素:即系没有内容HTML元素,例如:br、meta、hr、link、input、img

    2.3K20

    web前端页面布局学习

    p=2 默认未设置定位 父元素 宽度最大填充元素,高度正好容纳子元素。...如果子元素左浮动,则宽度仍在容纳子元素基础上最大填充元素,高度正好容纳子元素 如果子元素右浮动,则宽度正好容纳子元素,高度正好容纳子元素 这是因为子元素默认就是独占一行,向左对齐。...子元素浮动是基于父元素框体 浮动可以通过CSS clear清除 Display属性 none,inline,block,inline-block,table-cell,flex 每个元素都有一个display...属性,如divdisplay属性为block(块元素),而span元素display属性为inline(行内元素) 行内元素(inline): 1.没有宽高属性,不会独占一行 如span,设置宽高均无用...隐藏元素 display:none;隐藏元素,不保留物理空间 visibility:hidden;隐藏元素,保留物理空间 定位 值 描述 absolute 生成绝对定位元素,相对于 static 定位以外第一个父元素进行定位

    1K30

    「资深前端工程师总结」前端面试知识点大全——html篇

    渲染引擎: 负责取得网页内容(HTML、XML、图像等等)、整理讯息(例如加入CSS等),以及计算网页显示方式,然后会输出至显示器或打印机。...行内语义性元素 主要完成web页面具体内容引用和描述,是丰富内容展示基础。 meter:表示特定范围内数值,可用于工资、数量、百分比等。 time:表示时间值。...对象存储空间-表,对象-表中记录,使用keyPath指定键,使用add(),put()向对象存储空间中存储对象,当存储对象相同时add报错。...d、提高可用性和改进用户友好体验; e、有几个新标签,这将有助于开发人员定义重要内容; f、可以给站点带来更多多媒体元素(视频和音频); g、可以很好替代Flash和Silverlight;...flex 即弹性,会自动填充剩余空间,子容器伸缩比例由 flex属性确定。 单独设置子容器如何沿交叉轴排列:align-self 如果子容器和父容器同时设置了该值,以子容器为准。

    2K31

    display属性,及其区别

    block: 单独占一行 inline-block: 像inline一样放置(比如和它相邻元素处在同一行),像block一样表现。 none: 隐藏该区域,不占实际空间。...text/css"> div{ width: 300px; /*无效*/ height: 300px; /*无效*/ background-color: #CA6666; /*因没有内容填充所以没有显示出背景颜色...margin-bottom: 100px; /*无效*/ margin-left: 100px; margin-right: 100px; border: 1px solid #CB5757; /*因没有内容填充所以只显示出...,多个块级元素则换行显示 display:inline-block元素为什么可以设置宽高?...于是,值为block元素实际由外在“块级盒子”和内在“块级盒子”组成,值为inline-block元素则由外在“内联盒子”和内在“块级盒子”组成,值为inline元素则内外均是“内联盒子”

    1.3K10

    css布局 - 两栏自适应布局几种实现方法汇总

    但是大思想结构和模型有了以后,再往里边填充细节就比较好说了。...二、absolute - 定位实现 有了第一种浮动流思想启示,我们可以想到,既然浮动元素不占据父元素流体空间,从而让文案部分通过block自适应,达到了占据父元素全部空间效果。...那么另一种,通过绝对定位让左边元素漂浮起来,而不占用父元素流体空间,是不是也就可以实现这种效果了呢?!...六、table-cell - 伪表格布局 有了table老人家启发,让想起来css中还有一个属性display,他值是可以仿造table。...对于这几种方案兼容性或者坑点没有完整深入研究。欢迎遇到过坑你提个成熟建议。 另外,css真的相当灵活有趣,每一个方法中css属性不一定非要是列举这几条。

    1.8K20

    CSS深入理解学习笔记之vertical-align

    2、vertical-align起作用前提   应用于inline水平以及“table-cell元素。   默认状态下支持vertical-align元素:图片、按钮、文字和单元格。   ...table-cellvertical-align只会作用在自身,对子元素设置vertical-align是没有意义: ?...vertical-align:top     定义:①inline/inline-block元素元素顶部和整行顶部对齐;②table-cell元素:单元格顶padding边缘和表格行顶部对齐。...vertical-align:middle     定义:①inline/inline-block元素元素垂直中心点和父元素基线往上1/2x-height处对齐;②table-cell元素:单元格填充盒子相对于外面的表格行居中对齐...定义:提高/降低盒子基线到父级合适上/下标基线位置。 7、vertical-align前后不一行为机制   应用: ?   注:关注当前元素和父级,前后并没有直接影响。

    1.1K50

    CSS实用技巧(中)

    有何作用 绝对定位奇淫技巧 CSS特性 vertical-align为什么时灵时不灵 生效条件 只能应用在display为inline、inline-block、inline-table、table-cell...平常我们用margin: 0 auto;之所以能够使块级元素水平居中,是因为水平方向元素存在剩余可用空间,而auto平分剩余可用空间,因此就产生居中效果。...而垂直方向不存在剩余可用空间,因此无法垂直居中。...,而auto等分剩余可用空间,可以使元素达到垂直居中效果。...无依赖绝对定位 当绝对定位没有设置四周定位尺寸时,会发生神奇一幕,当前元素没有相对于最近非 static 祖先元素定位,而是在当前位置不变,并且当前元素脱离文档流,不占据页面空间

    1.5K40

    css布局 - 垂直居中布局一百种实现方式(更新中...)

    但究竟是因为什么呢?往图片后边写了一个x辅助理解,这下明白了吧!图片默认是文本基线对其。文本垂直居中,就到垂直正中间那里。但是图片底部为了与文字底部对其,所以留给顶部空间就不多了。...没有x时候会有一个空白换行节点在捣鬼,这也是为什么单独文字时候看不出毛病,单独图片使用同样方法却有问题原因。 ? 啊,这就是听张鑫旭老师讲课收获!...红框是before、after等伪类,以显示让我们看到上下剩余空间相差多少。 这一点真的和之前图片问题很接近: ?...把两个例子代码挪到一个html页面,惊奇发现,底部剩余空间都是比顶部少4像素! 于是,一不做二不休,直接使用margin负值让元素再之前基础上向上4像素,竟真的实现了绝对垂直居中。 ?...(特别说明,第三条系列中元素height值只是为了撑开然后填充背景色看。高度不确定不代表没有高度,所以这里是高度值随意改变,内部子元素永远垂直居中独秀专场)。 那我们派谁打头阵呢?

    3.5K10

    各大公司移动端页面 - 导航实现

    目前来说,移动端实现方法没有一个统一标准,大家各自采用自己实现方法,所以今天就给大家分享一下各大公司移动端页面的实现方法——导航栏 给大家分享之前,先说几句话。...效果分析 首先这么来实现,省了用浮动,大家都清楚,浮动会带来一系列问题,用display: table&display: table-cell代替了浮动;另外,有没有发现a标签设置了左边框1px,如果是浮动的话...,伪元素在手机端支持程度没有多大问题,在PC端下就比较麻烦了。...可以决定伸缩项目在伸缩容器中空间大小。如果每个都设置为1,每个伸缩项目在伸缩容器内都相等。...效果分析 Flexbox布局主体思想是元素可以改变大小以适应可用空间,当可用空间变大,Flex元素将伸展大小以填充可用空间,当Flex元素超出可用空间时将自动缩小。

    1.6K70

    CSS深入理解学习笔记之margin

    1、margin与容器尺寸   元素尺寸:①可视尺寸 clientWidth(标准);②占据尺寸   margin与可视尺寸:①适用于没有设定width/height普通block元素;②只适用于水平方向尺寸...  margin与占据尺寸:①block/inline-block水平元素均适用;②与有没有设定width/height无关;③适用于水平方向和垂直方向。...可用于页面的上下留白(padding兼容性不好)。 2、margin与百分比单位   普通元素百分比:相对于容器宽度计算。   绝对定位元素百分比:相对于第一个定位祖先容器宽度计算。...margin善用实例:  5、理解margin:auto    规则:如果一侧是定值,一侧是auto,则auto是剩余空间大小;如果两侧均为auto,则平分剩余空间。    ...⑵ margin重叠   ⑶ display:table-cell与margin:display:table-cell/display:table-row等声明margin无效。

    1.4K61

    第147天:web前端开发中各种居中总结

    缺点:不兼容IE6和IE7 适用场景:子元素数量多,不方便修改父元素属性,对浏览器版本要求相对较低时使用 方法④:绝对定位实现 (父元素)position:relative,(子元素)absolute...及以上可用 方法⑤:flex+justify-content/margin /*第一种方法*/ .parent{display:flex;justify-content:center;} /*第二种方法...:middle} .parent:after{display:inline-block; vertical-align:middle} 方法③ :块级元素 使用vertical-align时候,由于对齐基线是用行高基线作为标记...为了使用vertical-align, 我们需要设置父元素display:table, 子元素 display:table-cell;vertical-align:middle; /*第一种方法*/ ....parent{display:table} .child{display:table-cell;vertical-align:middle;} 优点:元素高度可以动态改变,不需要css定义,如果父元素有足够空间

    46440

    CSS进阶11-表格table

    例如,设置为'display:table-cell'图像将填充可用单元格空间,其尺寸可能会影响表格大小算法,如同普通单元格一样。...任何table元素都会自动生成必要匿名表对象,由至少三个对应于'table'/'inline-table'元素,'table-row'元素和'table-cell'元素嵌套对象组成。...如果表格比列宽,额外空间应该分布在列上。 如果后续行列数多于由表列元素table-column elements和第一行确定数字中较大值,多余列不会被渲染。...当“height”属性导致表格变高时,CSS 2.2没有定义多余空间如何分布。...表格边框与表格边框之间距离是该表格边框填充以及相关边框间距。例如,在右侧,距离是填充右边 + 水平边框间距。

    6.6K20

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

    display:table-cell 属性简介 display:table-cell;会使元素表现类似一个表格中单元格 td,利用这个特性可以实现文字垂直居中效果。...同时它也会破坏一些 CSS 属性,使用 table-cell 时最好不要与 float 以及 position: absolute 一起使用,设置了 table-cell 元素对高度和宽度高度敏感,对...可以实现大小不固定元素垂直居中。 margin 设置无效,响应 padding 设置。 对高度和宽度高度敏感。 不要对 display:table-cell 使用百分比设置宽度和高度。...诡异百分比宽高 使用 table-cell 有一个让人很抓狂地方,那就是他宽高是不能使用百分比设置,具体原因我一直没有找到,只能理解为这是这个属性特性。希望有知道老铁告知一声。...没有其他元素 table-cell 容器会获得它前面的元素在水平方向分配完全部宽度。2.

    63420

    前端硬核面试专题之 CSS 55 问

    选择没有元素元素 :target 选取当前活动目标元素 :not(selector) 选择除 selector 元素意外元素 :enabled 选择可用表单元素 :disabled 选择禁用表单元素...---- 如果需要手动写动画,你认为最小时间间隔是多久,为什么 ? 多数显示器默认频率是 60Hz,即 1 秒刷新 60 次,所以理论上最小间隔为:1/60*1000ms = 16.7ms。...怎么没有自动往下走呢?footer 说——不给绝对主义者让位!其实这与 footer 无关,而是因为 container 对 sidebar 无视造成——你再长,还是没感觉。...工作方式:浮动元素脱离文档流,不占据空间。浮动元素碰到包含它边框或者浮动元素边框停留。 影响 浮动会导致父元素无法被撑开,影响与父元素同级元素。...像素 px 是相对于显示器屏幕分辨率而言。 三、em 特点 em 值并不是固定; em 会继承父级元素字体大小。 em 是相对长度单位。相对于当前对象内文本字体尺寸。

    2K20

    css笔记 - 张鑫旭css课程笔记之 vertical-align 篇

    支持负值属性: margin letter-spacing word-spacing vertical-align 元素vertical-align垂直对齐位置与前后元素没有关系 元素vertical-align...垂直对齐位置与行高line-height没有关系。...对于内联元素,vertical-align和line-height虽然看不见,但实际上到处都是 空inline-block、没有任何文字和图片元素,或者本身有不为visibleoverflow属性...table-cell元素,单元格填充盒子相对于外边表格行居中对齐 字符有下沉特性 bottom: 底线 inline/inline-block元素元素底部和整行底部对齐 table-cell...元素vertical-align垂直对齐位置与前后元素没有关系 元素vertical-align垂直对齐位置与行高line-height没有关系。

    2K20

    面试题整理|45个CSS面试题

    大家好,又见面了,是你们朋友全栈君。...设备像素”,而这种像素长度和你在显示器上看到文字屏幕像素无关。...与其他标签之间将没有分配空间。 visibility:hidden 表示该标签不可见,但在页面上为其分配了空间。标签已呈现,只是在页面上看不到。 Q28.CSS特异性是什么意思?...flex容器主要特征是能够修改其子项宽度或高度,以在不同屏幕尺寸上以最佳方式填充可用空间。 采用Flex布局元素,称为Flex容器(flex container),简称”容器”。...相对relative 元素位置相对于自身进行了调整,而没有更改布局(因此,如果没有放置元素,将为元素留出一定空隙)。

    4.2K30

    Html和CSS布局技巧(转)

    单列布局 水平居中 水平居中页面布局中最为常见一种布局形式,多出现于标题,以及内容区域组织形式,下面介绍四种实现水平居中方法(注:下面各个实例中实现是child元素对齐操作,child元素父容器是...而vertical-align呢,是个比较挑食家伙,它只喜欢吃果冻,从小吃果冻长大,没有了果冻,它就会闹脾气,对你不理不睬。...称之为“果冻依赖型元素”,又称之为“inline-block依赖型元素”,也就是说,只有一个元素属于inline或是inline-block(table-cell也可以理解为inline-block水平...对css-vertical-align一些理解与认识 在使用vertical-align时候,由于对齐基线是用行高基线作为标记,故需要设置line-height或设置display:table-cell..., 媒体查询中可用于检测媒体特性有width、height和color(等), 使用媒体查询, 可以在不改变页面内容情况下, 为特定一些输出设备定制显示效果。

    4.8K20
    领券