HTML/CSS -- 利用table进行布局

亦凉 2022-04-10 07:19 444阅读 0赞

cssTable布局：[table布局][table]

布局1：高度固定，左边宽度固定，右边自适应

![20181228161132679.png][]

同理，我们可以右边宽度固定，左边自适应。

布局2： 高度固定，左右宽度固定，中间自适应

![20181228162848309.png][]

布局3：宽度固定，上下高度固定，中间自适应

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70][]

table布局有点老，但是依然有用武之地，当你用flex不好处理的时候，可以试试table布局。

**下面内容来自上面的博客原文。**

table标签（display:table）

1) table可设置宽高、margin、border、padding等属性。属性值的单位可以使用px，百分比值。  
2) table的宽度默认由内容的宽高撑开，如果table设置了宽度，宽度默认被它里面的td平均分，如果给某一个td设置宽度，那么table剩余的宽度会被其他的td平均分（有点类似flex布局）  
3) 给table设置的高度起到的作用只是min-height的作用，当内容的高度高于设置的高度时，table的高度会被撑高。

tr标签（display:table-row）

1) 给tr设置高度只起到min-height的作用，默认会平分table的高度。  
2) tr中的td默认高度会继承tr的高度，若给任一td设置了高度，其他td的高度也同样变高。适合多列等高布局  
3) 设置宽度、margin、都不起作用

td标签（display:table-cell）

1) td默认继承tr的高度，且平分table的宽度  
2) 若table（display:table）不存在，给td设置的宽高不能用百分比只能用准确的数值  
3) 给td设置vertical-align: middle; td元素里面(除float、position:absolute)所有的块级、非块级元素都会相对于td垂直居中  
4) 给td设置text-align: center; td元素里面所有非block元素(除float、position:absolute)都会相对于td水平居中，虽然block元素不居中，但其中的文字或inline元素会水平居中

### 总结: ###

使用table-cell还可以实现很多的布局，需要自己去发挥想象。总结下来也就需要记住几点，设置了display:table-cell的元素具有以下特性。

1.  text-align、vertical-align等对齐属性起作用，margin不起作用。宽高百分比值不起作用。
2.  会生成虚拟的table、tr把自己包裹住，如果有相邻的兄弟元素也被设置了table-cell,则会跟兄弟元素一起生成虚拟的table、tr把自己包裹住，并一行等高显示
3.  多个table-cell元素会占满被设置了display: table的元素的宽度，如果一个元素被设置了宽度，那么其他剩余的table-cell元素会占满剩下的宽度。当然，如果只有一个table-cell元素，就算设置了宽度也会占满table元素的宽度。
4.  对设置了float、absolute的元素不起作用。且IE6、7不支持

[table]: https://segmentfault.com/a/1190000007007885
[20181228161132679.png]: /images/20220402/69559ae26cd841cfb2c67a945716fec6.png
[20181228162848309.png]: /images/20220402/9fe62e46b3924d999ee04dc8b5f6cba5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70]: /images/20220402/d54b6abe7a1d40ddb036ef503b1f4907.png