糟糕,<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 小时前
一个纯本地运行的图片处理工具:压缩 / 裁剪 / 九宫格 / 圆角 / 滤镜 / 拼图 / 水印,终生使用
前端
IT_陈寒6 小时前
Vue的v-if和v-for混用居然是个天坑
前端·人工智能·后端
天衍四九-6 小时前
【无标题】
前端·spring boot·mysql·nginx·docker
广州华水科技6 小时前
2026年单北斗GNSS变形监测系统推荐榜单,解锁GNSS位移监测新高度
前端
xcyxiner6 小时前
DicomViewer24 修复编译bug(window test 失败)
前端·qt
linux_cfan7 小时前
videojs v10 源代码系列解读:34 · `createComposition`:类型安全的冲突检测
前端·安全
utmhikari8 小时前
【AI原生】借助AI之力优化个人博客前端样式
前端·css·hexo·next·个人博客·ai-native·vibe coding
小凯在掘金8 小时前
为什么箭头函数不能作为构造函数?
前端·javascript
JustHappy9 小时前
「vConsole MCP🛠️」我让 AI 直接看见任何 H5 的日志和请求帮你 debug
前端·javascript·程序员