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

3个问题

开篇，先提出3个问题

<table> 是块级元素block element吗？
<table> 的宽度默认是 100% 吗？
块级元素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

留下两个疑问：

会不会 <table> 根本就不是块级元素呢？
会不会块级元素的宽度并全部是 100% ，还有 auto ？

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

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

总结

我认为

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

举个例子，<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年前端，目前外包，想进好公司，求捞，谢谢