table-cell显示行为与一样。

一、表格元素tableHTML中，表格由table元素来定义.还有一些用于表格的其他标签，如caption、thead、tbody、tfoot、th等。表格元素标签：table：定义一个表格。tr：定义表格中的一行。td：定义表格中的一个单元格。th：定义表格中的表头单元格。th通常用于表格的第一行或第一列，通常会加粗显示。caption：定义表格的标题，显示在表格的顶部。，默认加粗显示thead

**请解释一下CSS中的“display:table”和“display:table-cell”有什么作用？**4.**在CSS中，你如何使用“overflow”属性来控制元素的溢出内容？**5.

2）多行设置该元素css属性：display:table-cell;vertical-align:middle;，还需设置该元素的父级元素css属性：display:table;

1.tabledisplay:table;使父元素的作用像table元素一样，display:table-cell;使子元素的作用像td一样。

element-plusel-table在页面放大时会出现表头和内容错位的情况现象解决方法如下://关键css代码.el-table__headercol[name="gutter"]{display:table-cell

important;//此处的宽度值，对应你自定义滚动条的宽度即可}}//关键css代码.el-table__headercolgroupcol[name="gutter"]{display:table-cell

二、形成BFC的条件1、浮动元素，float除none以外的值；2、定位元素，position（absolute，fixed）；3、display为以下其中之一的值inline-block，table-cell

其中display的应用很灵活，用的最多的是table和table-cell；float实现浮动排列，多行可以每行套个容器，也可以不套而是在每

触发条件：根元素，即htmlfloat的值不为none（默认）position的值为absolute或fixedoverflow的值不为visible（默认）display的值为inline-block、table-cell

在css里，有一个display的属性，它规定元素应该生的框的类型，可能的值很多，除inline、block，常用的有table-cell、inline-block等，其中inline-block是css2.1

;height:200px;/*display:table-row;不行，是行内元素了*/display:table;background-color:#db7b7b;}.inner{display:table-cell

parent_absolute_auto{display:table;width:200px;height:200px;border:1pxsolidred;margin-bottom:20px;}.child{display:table-cell

ie15以上的低版本不支持，Safari需要使用-webkit-prefix；vertical-align:middle使用的前提条件是内联元素以及display值为table-cell的元素，垂直居中

body.el-tableth.gutter{display:table-cell!

图片img与父元素div之间的间隙解决：vertical-alignvertical-align指定了行内（inline）元素或表格单元格（table-cell）元素的垂直对齐方式(摘录自MDN)。

position:absolute/fixed3、行内元素：display:inline-block;4、overflow不为visible的块级元素5、display值为flow-root、表格单元素table-cell

然后使用插槽，fixed定位等，导致样式出现了错乱解决方案1、线没有对齐/*Element-UI的table组件出现表格线条不对齐的问题*/body.el-tableth.gutter{display:table-cell

;height:50px;margin:0auto;}行内元素水平居中.parent{text-align:center;}模拟表格实现水平居中display：table()|table-row()|table-cell

（1）表格中的和元素或者设置display计算值是table-cell或table-row元素的margin无效。

在App.vue中添加：/*element中表格中的表头与表格内容边框错位的解决方法*/body.el-tableth.gutter{display:table-cell!

`table`、`table-row`、`table-cell`8.`list-item`9.`inline-table`、`table-caption`、`table-column`等⭐写在最后⭐

父容器display:grid;display:inline-grid;设为网格布局以后，容器子元素（项目）的float、display:inline-block、display:table-cell、

容器里面的元素不会在布局上影响到外面的元素，并且bfc具有普通容器所没有的一些特性二、触发BFC浮动元素：float除none以外的值绝对定位元素：position（absolute、fixed）display为inline-block、table-cell

display:table;width:800px;border-radius:1px;overflow:hidden;}.status-barli{background:#656565;display:table-cell

body.el-tableth.gutter{display:table-cell!

直接用v-show是不起作用的，经过查找是说v-show起作用的本质是display:none,而因为td的display:table-cell;权限高于display:none,所以v-show失效，

display:inline-block；(2)通过display:flex;align-items:center实现CSS垂直居中；(3)通过父元素display:table;子元素display:table-cell

文章目录line-height绝对定位+margin:autoflex绝对定位+margin:负值定位+transformvertical-align:middledisplay:table-cell思维导图前文

.parent{width:800px;height:500px;border:2pxsolid#000;display:table-cell;vertical-align:middle;text-align

产品要求表格中有的列可以控制出现和隐藏，想到了用v-if或者用v-show控制table-column，但实际是v-if有效，v-show无效，主要是elementUI的table中的table-column里面用了display：table-cell

display:table;常见的容器属性display:table=>相当于“table”标签；常见的项目属性display:table-row=>相当于“tr”标签；display:table-cell

怎么触发BFC1.float的值left或right2.overflow的值不为visible（默认）3.display的值为inline-block、table-cell、table-capti

目录背景原因：display:table-cell>display:none解决：方法A.获取元素设置display（适用于简单场景）方法B.自定义tabs（适用于复杂场景）背景内联样式(style=“

important;//此处的宽度值，对应你自定义滚动条的宽度即可}}//关键css代码.el-table__headercolgroupcol[name="gutter"]{display:table-cell

vertical-align的百分比值事相对于line-height的计算值计算的在CSS世界种，非主动触发唯一的内联元素是不可能跑到计算容器外面的起作用的前提条件只能应用于内联元素以及display值为table-cell

目录HTML文本显示效果方式1方式2（2种）方式3display：flex属性详解方式4display：grid属性详解方式5display:table-cell、vertical-align:middle

BlockFormattingContext)块级格式化上下文参考文献：kayosite.com/block-formatting-contexts-in-detail.html-触发条件:1.display:table-cell

原因分析:通过v-show隐藏的原理是控制css的display:none;而而因为td的display:table-cell；权限高于display:none所以用v-show不生效只能换成v-if

.如何让一个盒子水平垂直居中1、如何让一个盒子水平垂直居中①定位：（常用方法,推荐）position:absolute;position:relative;left:值;top:值;②display:table-cell

尤其是DIV+CSS很不方便解决的问题，比如以下两种情况：一、父元素宽度固定，想让若干个子元素平分宽度.parent{display:table;width:1000px;}.son{display:table-cell

1.在父元素中增加display:table-cell，vertical-align写在在父元素中12345678910111213141516.btn{display:table-cell;width

vertical-alignmiddle不生效如何修改vertical-align的定义1.在父元素中增加display:table-cell，vertical-align写在在父元素中2.在父元素中增加空的

2.使用display:table-cell来居中这种方法只能在IE8+、谷歌、火狐等浏览器上使用，IE6、IE7都无效.div1{display:table-cell;ve

网格布局容器包裹多个项目；123456789容器：container指定grid项目：item第一级子元素网格布局下，项目的其他子元素的display值将失效；如float、inline-block、table-cell

inline;指定对象为内联元素display:block;指定对象为块级元素display:none;隐藏对象，与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间display:table-cell

不管是在平常布局中还是在面试当中都会遇到让一个盒子水平且垂直居中的情况，在这里总结了几种常用的居中方法：1、绝对定位居中（最常用、好用）2、负margin居中（传统方法）3、margin固定宽高居中4、flex居中5、transform居中6、table-cell

display:table;border-collapse:separate;width:100%;}.input-group.form-control,.input-group-addon{display:table-cell

来模仿表格，通过给属性赋值来达到表格的效果，.table{dispaly:table;width:800px;height:200px;}.table-row{display:table-row;}.table-cell

解决方法是将他们各种变为一个BFC，可以使用overflow:hidden;display:inline-block/table-cell;position: