美文网首页
原声css table布局

原声css table布局

作者: who_are_you_ | 来源:发表于2020-05-26 19:41 被阅读0次

表格布局有两种方式:

1.HTML Table(<table>标签)和 2. CSS Table(display:table 等相关属性)。

HTML Table是指使用原生的<table>标签,而CSS Table是指用CSS属性模仿HTML 表格的模型。

两者对应关系大致如下:

  1. table { display: table }
  2. tr { display: table-row }
  3. thead { display: table-header-group }
  4. tbody { display: table-row-group }
  5. tfoot { display: table-footer-group }
  6. col { display: table-column }
  7. colgroup { display: table-column-group }
  8. td, th { display: table-cell }
  9. caption { display: table-caption }

l利用上面所列的属性可方便实现许多功能:

如:块状元素垂直居中:display: table-cell; vertical-align: middle; 关于元素居中问题有过专门归纳

实现圣杯布局。
原文地址[https://www.cnblogs.com/xiongzuyan/p/8534085.html
]

相关文章

  • 原声css table布局

    表格布局有两种方式: 1.HTML Table( 标签)和 2. CSS Table(display:table ...

  • 块状元素和内联元素、盒子模型

    div+css布局 表格布局 table布局 div+css布局 浮动布局 块状元素和行内元素 display:...

  • DIV+CSS布局与table布局的比较

    一.DIV+CSS布局与table布局的比较 1.DIV+CSS布局的优点 (1).css的极大优势表现在简洁的代...

  • Tailwind Table

    表格样式工具类 表格布局table layout CSS中table-layout属性用于设置表格布局的类型,即用...

  • CSS实现三栏布局

    CSS实现三栏布局(5种) 常见的布局方式: float布局、Position定位、table布局、弹性(flex...

  • CSS布局:float、position、flex、grid

    CSS是前端基础技能之一,而CSS最重要的功能就是网站布局。CSS布局方式有很多,从远古时代的table(表格)布...

  • CSS布局篇

    1. 引言 CSS常见布局方式有很多种,如table布局、浮动布局、flex/grid布局、响应式布局等。这里先介...

  • CSS知识

    CSS知识 标签(空格分隔): CSS布局 图片垂直居中于元素 外部使用display:table;内部使用dis...

  • css3的display:table布局

    css3的display:table布局https://blog.csdn.net/Bessicxie/artic...

  • css之table布局

    table:指定对象作为块元素级的表格。类同于html标签 (CSS2)inline-table:指定对象作为内联...

网友评论

      本文标题:原声css table布局

      本文链接:https://www.haomeiwen.com/subject/ewavahtx.html