只设置display:table-ceil,不设置父元素的display:table或者display:table-row

CSS表格除了包含table布局的普通规则之外,同时还有着CSS table布局的超强特性:缺少的表格元素会被浏览器以匿名方式创建。

CSS2.1规范中写道:
CSS2.1表格模型中的元素,可能不会全部包含在除HTML之外的文档语言中。这时,那些“丢失”的元素会被模拟出来,从而使得表格模型能够正常工作。所有的表格元素将会自动在自身周围生成所需的匿名table对象,使其符合table/inline-table、table-row、table-cell的三层嵌套关系。

这段话的意思是,如果我们为元素使用“display:table-cell;”属性,而不将其父容器设置为“display:table-row;”属性,浏览器会默认创建出一个表格行,就好像文档中真的存在一个被声明的表格行一样。

让我们用个简单的例子来研究下它的这一特性:以下是三栏栅格布局。我们将会用三份不同的HTML样例,而它们将表现出相同的视觉效果。
在这里插入图片描述
首先,以下是能够生成三列布局样例的其中一份:
html代码:
在这里插入图片描述
css代码:
在这里插入图片描述
以上CSS给类名为container的元素定义了“display:table;”属性,类名为row的元素定义了“display:table-row;”,类名为cell的元素定义了“display:table-cell;”,同样还给它定义了边框、高度和宽度值。
以上HTML文档明确地为三个单元格定义了包含它的表格和表格行,使用到了所有我们创建的CSS类名。然而,我们可以减少这些标签,移除一行div元素试试:
在这里插入图片描述
即使上面的代码遗漏了声明表格的那一行,浏览器仍将创建一个匿名的表格行。我们还可以移除更多的代码:
在这里插入图片描述
以上代码遗漏了声明表格和表格行的代码,浏览器同样会创建出这些匿名的盒对象。即使缺少这些标签元素,最终的效果仍然是一样的。

创建匿名表格元素的规则
这些匿名的盒对象不是用魔术变出来的,它们也不会自动往你的HTML源码中添加新的标签。为了完全发挥出匿名表格元素的优势,你最好能够对创建它们的规则有所了解。如果布局中调用了匿名元素,浏览器将会根据需要创建一个匿名的盒对象并将它的CSS display属性设置为table、table-row或table-cell中的一个。
如果某个元素已经被设置为“display:table-cell;”,而它的父节点(包含它的容器)没有被设置为“display:table-row;”属性,那么浏览器将会创建一个被设置为“display:table-row;”的匿名盒对象来嵌套它。并且与之相邻的属性为“display: table-cell;”的兄弟节点也都会被这个匿名盒对象所包含,直到碰到一个没有被设置为“display: table-cell;”的元素而结束这一行。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3中封装Table可以使用组件化的思想,将表格的头部、行数据、分页等功能进行拆解,然后再组合成Table组件。以下是一个基本的Table组件封装示例: ```vue <template> <div class="table-container"> <table> <thead> <tr> <th v-for="column in columns" :key="column.key">{{ column.title }}</th> </tr> </thead> <tbody> <tr v-for="row in rows" :key="row.id"> <td v-for="column in columns" :key="column.key">{{ row[column.key] }}</td> </tr> </tbody> </table> <div class="pagination"> <button @click="prevPage">上一页</button> <span>{{ currentPage }}/{{ totalPages }}</span> <button @click="nextPage">下一页</button> </div> </div> </template> <script> export default { name: 'Table', props: { columns: { type: Array, default: () => [] }, data: { type: Array, default: () => [] }, pageSize: { type: Number, default: 10 } }, data() { return { currentPage: 1, totalRows: this.data.length } }, computed: { totalPages() { return Math.ceil(this.totalRows / this.pageSize) }, rows() { const start = (this.currentPage - 1) * this.pageSize const end = start + this.pageSize return this.data.slice(start, end) } }, methods: { prevPage() { if (this.currentPage > 1) { this.currentPage-- } }, nextPage() { if (this.currentPage < this.totalPages) { this.currentPage++ } } } } </script> <style scoped> .table-container { margin: 20px; } table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid black; padding: 5px; text-align: center; } th { background-color: #ddd; } .pagination { display: flex; justify-content: center; margin-top: 10px; } button { margin: 0 5px; } </style> ``` 在这个示例中,Table组件接受两个props: columns和data。columns是表格的头部信息,是一个包含title和key两个属性的数组。data是表格的行数据,是一个数组,每个元素是一个对象,对象的属性名与columns中的key对应。 Table组件还有一个pageSize的props,用于设置每页显示的行数。组件内部使用computed计算出总页数totalPages和当前页的行数据rows。同时,组件内部维护了一个currentPage的变量,用于记录当前页码。 在模板中,使用v-for遍历columns和rows数组,生成表格的头部和行数据。同时,在底部添了一个简单的分页控制器,通过点击上一页和下一页按钮来切换页码。 这个示例只是基本的Table组件封装,实际的业务需求可能更复杂,需要根据实际情况进行调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值