糟糕,<table>是块级元素吗?好像认知出错了

3个问题

开篇,先提出3个问题

  1. <table> 是块级元素block element吗?
  2. <table> 的宽度默认是 100% 吗?
  3. 块级元素block element的默认宽度是 100% 吗?

百度回答

看看百度对此上述三个问题的回复,

实际问题

但实际,我发现,百度答案可能都不对,或者说这是大家认知上的,是错的

我写了一个简单的demo,结构很简单,由 <table> 和 <span> 组成

html 复制代码
<table>
  <thead>
    <tr>
      <th>标题1</th>
      <th>标题2</th>
      <th>标题3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>内容1</td>
      <td>内容2</td>
      <td>内容3</td>
    </tr>
    <tr>
      <td>内容1</td>
      <td>内容2</td>
      <td>内容3</td>
    </tr>
  </tbody>
</table>
<span>span内联元素</span>

<table>是块级元素block element吗?

<span> 元素没有紧跟在 <table> 后面,<table> 符合block element独占一行的特征

但是,<table> 的宽度是 100% 吗?好像并不是

<table> 的宽度是自身宽度,等同于 width: auto 并不是 width: 100%

而百度/大众对块级元素的认知,块级元素宽度就是100%的

这是不是和实际并不相符合?

实际上 <table> 确实是独占了一行,具备了块级元素的特征,但是宽度并不是 100% 而是 auto

留下两个疑问:

  1. 会不会 <table> 根本就不是块级元素呢?
  2. 会不会块级元素的宽度并全部是 100% ,还有 auto ?

进一步查看 <table> 的默认属性,

显示 <table> 为 display: table 并不是 display: block

总结

我认为

  1. <table> 并不是真正意义的块级元素(display: block),而是具备了块级元素特征的 table 元素(display: table)
  2. 它独占一行,但宽度为 width: auto
  3. 以内部宽度为准,并不会自动拉伸适配父级宽度

举个例子,<table> 自身内容宽度只有300px,那即使剩余700px宽度可用,也不会主动撑满,而是以300px为准,在区域(父级)宽度小于300px时,会压缩自身宽度适配区域(父级)宽度,总体而言,相等于原生就自带了 width: auto、max-width: 100% 两条css属性

这也是 width: 100% 和 width: auto 的区别吧

这点在适配大屏幕上,可能会遗漏掉

了解的意义

我们在做项目的时候,总是使用类似 el-table 之类的组件封装,但却很少去了解基础元素本身,也可能不知道,为什么 element-ui 的组件示例代码中,为什么要加 style="width: 100%"

可能觉得删掉也是一样的呈现

PS:我复制组件代码的时候,经常删掉了这行样式,现在看来是有用意在的

el-table 是自动获取宽度并设置表格 style width 样式,并通过 <colgroup> 设置每一列的宽度,并监听了屏幕 resize 事件,时刻保持适配,所以设置 style="width: 100%" 也是为了兼容/确保获取到的当前组件的宽度是自适应的宽度吧

所以在这种情况下,让我们可以不用去管自适应的问题,可能也正是因为组件太好用了,以至于我们忘记了HTML元素本身

写在最后的毛遂自荐,大专,base广州,7年前端,目前外包,想进好公司,求捞,谢谢

相关推荐
鶴哥只手遮天5 小时前
Vue 3 核心源码深度剖析系列(v3.5.44)-第 1 章 项目全景:monorepo 架构与工程化体系
前端·vue.js·开源
流星。。方5 小时前
小团队官网SEO落地:前端语义化与静态生成的工程实践
前端·状态模式
用户530429765795 小时前
盘点危化品搬运诊断的6类工具与自处理边界判断
前端
curtain5 小时前
从古法编程到 Agent:我入行这两年,AI 改变了什么
前端·openai
zyfts6 小时前
10分钟自制Codex钉钉通知Skill:AI干完活自动钉钉提醒你
前端
大孜然6 小时前
孜然QQ频道自动化程序机器人配置教程
前端
用户469384921556 小时前
AIUI 焦点高亮切换失效排查与规避:为什么按钮不变换形态呢?
前端
派大鑫wink6 小时前
纯前端实现软考中级·软件设计师备考学习网站
前端·学习
kyriewen6 小时前
我扒了 npm 三年数据:AI 没把依赖变胖,是把包变多了
前端·人工智能·程序员
liqingdi4376 小时前
[SWPUCTF 2023 秋季新生赛]Easy SMC
服务器·前端·javascript