display:table-cell的应用

最新推荐文章于 2022-07-07 12:00:32 发布
原创 最新推荐文章于 2022-07-07 12:00:32 发布 · 393 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍了CSS中的display:table-cell属性，并通过四个实际应用案例展示其在网页布局中的灵活性，包括垂直居中、自适应布局、等高布局及列表布局。

display:table-cell属性指让标签元素以表格单元格的形式呈现，

与其他一些display属性类似，table-cell同样会被其他一些CSS属性破坏，例如float, position:absolute，所以，在使用display:table-cell与float:left或是position:absolute属性尽量不用同用。设置了display:table-cell的元素对宽度高度敏感，对margin值无反应，响应padding属性，基本上就是活脱脱的一个td标签元素了。

一、display:table-cell与大小不固定元素的垂直居中

二、display:table-cell与两栏自适应布局

三、display:table-cell下的等高布局

四、display:table-cell下的列表布局

luuu7
关注
display:table-cell实现兼容性的两栏自适应布局实现代码
09-25
4. 在实际应用中，`display: table-cell` 布局可能需要与 `display: table` 和 `display: table-row` 结合使用，以创建完整的表格结构。在这种情况下，`display: table` 应用于一个包含所有单元格的容器，而 `...
实现div垂直居中的display:table-cell方法示例介绍
12-13
ie7和ie6都不能识别 display: table-cell;（但是支持display: block等css1的属性！） ie8以及以后版本可以识别！ ie7和ie6能识别vertical-align:middle; 如果盒模型中间只有几段文字的话，设置line-height就可以...
display:table-cell
weixin_33698823的博客
04-06 302
我所知道的几种display:table-cell的应用 by zhangxinxu from http://www.zhangxinxu.com 本文地址：http://www.zhangxinxu.com/wordpress/?p=1187 一、display:table-cell属性简述 display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签...
display：table-cell
weixin_30295091的博客
12-25 283
一：什么是table-cell display:table-cell 就是标签属性以表格形式呈现，有点像td，IE8以上兼容 二：display:table-cell使用注意 1. float，position：absolute对其有一定的破坏性； 2. 宽度高度敏感 3. 对margin毫无反映，响应padding属性 4. 类容溢出会自动撑开父元素 三：display:...
关于CSS中的display:table-cell使用技巧的几种应用
01-19
目前IE8+以及其他现代浏览器都是支持此属性的，但是IE6/7只能对你说sorry了，这一事实也是大大制约了display:table-cell属性在实际项目中的应用。 我们都知道，单元格有一些比较特别的属性，例如元素的垂直居中对齐...
css display table-cell
常思考->有目标->重实践->善反思
05-22 1938
display 属性规定元素应该生成的框的类型,用的最多的就是display:block;显示 display:none;隐藏。 下面是所有值的用法描述。display本身意思是“显示、阵列”的意思值 描述 none 此元素不会被显示。 block 此元素将显示为块级元素，此元素前后会带有换行符。 inline 默认。此元素会被显示为内联元素，元素前后没有换行符。 inline-b
display:table-cell布局
Aliguagua的博客
12-04 1万+
display:table-cell布局display:table-cell指让标签元素以表格单元格的形式呈现，使元素类似于td标签。IE8+及现代版本的浏览器都支持此属性，IE6/7不支持（可用其他方法实现类似效果）。同样，display：table-cell属性也会被float，position：absolute等属性破坏效果，所以尽量避免同时使用。CSS display属性的表格布局相关属性的
CSS——布局布局神器display:table-cell
ZJH_are的博客
07-07 942
用float来做布局触发的问题比较多，例如要清除浮动，元素浮动后还会导致该元素脱离文档流，即使你清除float，该元素依旧是脱离文档流。左右布局能用布局我就用它来布局，但是还是无法完全不使用它，很多布局例如需要靠左和靠右的布局场景下就没办法不去使用float来布局。 元素两端对齐第一个案例是让两个元素分别向左和向右对齐，如果是过去，我一定会用float来实现，但其实用table可以这么做： 自动平均划分每个小模块，使其一行显示 第二个案例我们先看看图：遇到上面这种布局，一般会用来做，或者把每个设置
css - display:table-cell的使用
热门推荐
火星男孩的分享空间
02-08 1万+
参考： 布局神器(一)display:table-cell display:table-cell指让标签元素以表格单元格的形式呈现，使元素类似于td标签。 display: table与标签table的对比 示例： 参考：css文档：display css中display设置为table、table-row、table-cell后的作用及其注意点 <!DOCTYPE htm...
display: table-cell属性
sinat_39303863的博客
03-29 349
display: table-cell属性 display: table-cell此属性使用可以实现单行或多行文本垂直居中的效果。表现类似td元素。 使用过程中注意如下： 1.不要与float:left；position:absolute；一起使用； 2.margin设置无效，响应padding设置； 单行或多行文字垂直居中： vertical-align:middle–使文字内容垂直居中 text-align: center–使文本居中对齐 border: 1px solid #5F9EA0—外框实线1
display:table-cell属性
夏天的博客
10-22 471
display:table-cell指让标签元素以表格单元格的形式呈现，使元素类似于td标签。 IE8+及现代版本的浏览器都支持此属性，IE6/7不支持（可用其他方法实现类似效果）。同样，display：table-cell属性也会被float，position：absolute等属性破坏效果，应避免同时使用。 如何垂直居中一个标签，也可以用到该属性 ...
【前端】盒子水平垂直居中的六大妙招
big_asm的博客
05-21 1644
第一种方式 定位方法 使用定位实现，让子盒子相对于父盒子进行定位 父盒子设置相对定位，父盒子设置绝对定位 先把盒子挪到中间，然后向上向下移动自己的一半 缺点嘛就是必须知道盒子的宽高，才能计算移动的距离 <style> .aa{ width: 600px; height: 600px; position: relative; background-c.
几种display:table-cell的应用
date25000的博客
08-27 155
一、display:table-cell属性简述 display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性的，但是IE6/7只能对你说sorry了，这一事实也是大大制约了display:table-cell属性在实际项目中的应用。 单元格有一些比较特别的属性，例如元素的垂直居中对齐，关...
一、display:table-cell属性简述
IT技术宅-北方的刀郎
03-21 832
一、display:table-cell属性简述display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性的，但是IE6/7只能对你说sorry了，这一事实也是大大制约了display:table-cell属性在实际项目中的应用。我们都知道，单元格有一些比较特别的属性，例如元素的垂直居中对齐，关联伸缩等，所以displa
CSS display 属性
wgchen
04-26 852
阅读目录CSS display 全部属性table-cell 布局1 高度不固定内容水平垂直居中2 元素两端垂直对齐3 等高布局4 均分列表布局5 两栏自适应布局display:table 的用法1 div 模拟表格：2 实现浮动效果3 类似留言用例4 微博评论 display 属性规定元素应该生成的框的类型。 CSS display 全部属性 值 描述 none
css中的display属性值：table，table-row，table-cell
liaowenxiong的博客
12-09 6285
table：此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。 table-row：此元素会作为一个表格行显示（类似 <tr>）。 table-cell：此元素会作为一个表格单元格显示（类似 <td> 和 <th>） 上述这些 display 属性值，可以让元素在显示时具有表格、表格行、单元格相关的属性，例如，div 元素，你正常显示几个 div 元素是这样的： 示例代码： <div style="border: 1px soli
display: table-cell; 滚动
最新发布
06-13
### 解决方案 在 `display: table-cell` 布局下，滚动条无法正常滚动的问题通常与以下因素有关：容器的尺寸限制、表格布局的特性以及内容溢出的处理方式。以下是解决该问题的具体方法和思路： #### 1. 确保父容器具有明确的高度 在使用 `display: table-cell` 的布局时，如果父容器没有明确的高度定义，可能会导致滚动条无法正常工作。需要为父容器设置一个固定高度，并启用 `overflow-y: auto` 或 `overflow-y: scroll`。 ```css .parent-container { height: 300px; /* 设置固定高度 */ overflow-y: auto; /* 启用纵向滚动 */ display: table; /* 父容器需要是 table */ } ``` #### 2. 避免 `table-cell` 元素的宽度超出限制 `table-cell` 元素会根据内容自动调整宽度，这可能导致滚动条无法正常显示。可以通过 `max-width` 和 `word-break` 属性限制单元格内容的宽度，避免内容溢出。 ```css .table-cell-element { max-width: 200px; /* 设置最大宽度 */ word-break: break-all; /* 自动换行 */ display: table-cell; } ``` #### 3. 使用伪元素或额外的包裹层实现滚动 如果直接在 `table-cell` 上添加滚动条效果不理想，可以考虑将内容包裹在一个额外的 `div` 中，并为该 `div` 设置滚动属性。 ```html <div class="parent-container" style="display: table; height: 300px;"> <div class="scrollable-content" style="display: table-cell; height: 100%; overflow-y: auto;"> <!-- 内容 --> <p>长内容...</p> <p>长内容...</p> <p>长内容...</p> </div> </div> ``` #### 4. 确保表头固定时，内容区域独立滚动 如果需要实现表头固定而内容区域滚动的效果，可以将表头和内容分别放在两个独立的容器中，并为内容容器设置滚动属性[^4]。 ```html <div class="table-container" style="height: 300px; overflow-y: auto;"> <div class="table-header" style="display: table-row;"> <div style="display: table-cell; border: 1px solid black;">表头1</div> <div style="display: table-cell; border: 1px solid black;">表头2</div> </div> <div class="table-body"> <div style="display: table-row;"> <div style="display: table-cell; border: 1px solid black;">内容1</div> <div style="display: table-cell; border: 1px solid black;">内容2</div> </div> <div style="display: table-row;"> <div style="display: table-cell; border: 1px solid black;">内容3</div> <div style="display: table-cell; border: 1px solid black;">内容4</div> </div> </div> </div> ``` #### 5. 调整 `el-table` 的样式以适配滚动条 对于基于 `el-table` 的场景，可以参考引用中的解决方案，将表格的主体部分改为块级元素并设置滚动条边距[^1]。 ```css ::v-deep .el-table__body { width: calc(100% - 22px); padding-right: 30px; display: block; overflow-y: auto; height: 300px; /* 设置固定高度 */ } ``` ### 注意事项 - 如果 `display: table-cell` 的布局复杂度较高，建议结合 JavaScript 动态调整容器尺寸。 - 在某些情况下，`table-cell` 布局可能不如 `flexbox` 或 `grid` 布局灵活，可以根据具体需求选择更合适的布局方式。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值