table 超出 父元素 div

table 超出 父元素 div

---

实际是把表格写在了 redio 里面

问题： table 在 div 里面，想要的效果是如果 table 的内容超出了父元素就显示省略号，再把 table 的宽度设置为100%，但是，最后数据比较长还是超出了父元素

原因： table 是有不一样的默认样式 table-layout

值	描述
auto	默认，列宽由单元格设定
fixed	列宽由表格宽度或列宽自己设定
inherit	继承，从父元素继承table-layout的值

解决方案： 把 table-layout 的值设为有表格宽度固定

    table {
      table-layout: fixed;
      //省略号显示超出的内容
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

最后得到的结果： text-overflow: ellipsis 并没有生效

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-el8u2n9J-1628772797893)(https://i.loli.net/2021/08/12/9K4Ny6vHnGPZpWs.png)]

原因： 应该给 单元格设置固定的宽度，并且超出之后显示省略号

    table {
      table-layout: fixed !important;
      width: 100%;
    }
    td:not(:first-child),
    th:not(:first-child) {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 40%;
    }

最后就能得到想要的结果了😄

这个接口虽然符合预期，但是有出现了新的问题就是这里的表格里面的内容显示也是显示成省略号了，都不能看到完整的信息，果然说时迟那时快这个问题就被提出来了

那么问题来了，这个 antd 的 table 为什么不能自适应换行显示而是会超出父元素呢？还有我们费这个大的劲来设置不让它超出。

大胆猜测是因为把这个表格写在了 redio 里面

答案也果然如此， redio 是内联元素，表格是块元素，这样写肯定是会破坏表格的布局的，比如说antd 的表格头上有是一个样式是 overflow-wrap: break-word 也就是用于不能分开的字符太长并被在包裹着，为了防止溢出，允许这样的单词能换行，是不管用的

如果把代码改一下，把table拿出来能实现同样的效果吗，答案是确定的

    <Radio.Group> 
        <Radio value={BackupMethod.BackupSet}>
            <span>Rebuild database using a backup set</span>
         </Radio>
    </Radio.Group>

      {state.backupMethod === BackupMethod.BackupSet && (
        <div className="pl pt">
          <Table
            size="small"
            columns={columns}
            dataSource={state.backups}
            // @ts-expect-error
            rowSelection={rowSelection}
            rowKey="backupId"
          />
        </div>
      )}

只要我们用 redio 的 value 来控制表格的显示和隐藏就行了，这个也是能实现同样的点击 redio 就展开显示表格的效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VNzWyCm2-1628772797901)(https://i.loli.net/2021/08/12/NLjnsC2i1yclDxV.png)]

但是当把表格到达最小的宽度还是会超出父元素

这种情况是无法避免的，毕竟这是它作为表格的底线，这时候我们就可以换一种思维了，既然不能超出那就在给最小值的时候它加滚动条显示