100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > ant design vue table 高度自适应_html之table表格

ant design vue table 高度自适应_html之table表格

时间:2022-10-13 10:12:10

相关推荐

ant design vue table 高度自适应_html之table表格

概述

html中提供了一个table表格的东西,不过到现在来说,用处基本上不是很大,但有些报表的项目中还是会用到的。此内容可以稍微一带而过,用到的时候,再回来复习也不迟。表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

基本语法

thead:定义表格头部 tbody:定义表格主体tfoot:定义表格尾部tr:定义定义行td:定义列 每一格数据th:定义标题单元格,大多数浏览器会把表头显示为粗体居中的文本

tip:1.如果在table下直接定义tr,结构自动会补全tbody,像thead这些标签可以不写,浏览器会自动帮我们补全2.table没有写宽度,则由内容撑开3.如果当前列某一个宽度变化 整列都发生变化4.如果当前行某一个高度发生变化,则整行都发生变化5.margin无法实现表格的单元格直接的间隔

table中常用的属性

border:定义表格边线,表格默认是没有边线的。

colspan:单元格占多少列(跨列)

rowspan:单元格占多少行(跨行)

border-collapse: collapse; 当设置border="1"的时候,默认单元格都会有一条边线,使用这个样式可以避免这种情况

tip:在table也可以使用css样式表去控制,如果写行内样式,可以省略style。

实例

<!doctype html>

效果图

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。