关于css table添加横向滚动条,tb、th长度自适应

大慧儿吖

于 2022-07-05 10:53:04 发布

阅读量3k

点赞数 1

CC 4.0 BY-SA版权

文章标签： css

本文链接：https://blog.youkuaiyun.com/pingpangpangpang/article/details/125615258

本文介绍了一种使用CSS实现表格布局的方法，通过设置父容器tableBox的宽度为100vw并固定，使得th和td元素在使用White-space:nowrap属性时不换行，同时通过width:fit-content实现内容宽度自适应。此外，还利用padding属性优化了单元格间的间距。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.tableBox {
  height: 100%;
  background: #fff;
  font-size: 12px;
  width: 100vw;
  overflow: auto;

  table {
    border-collapse: collapse;
    margin: 10px 0;
    border-spacing: 0;
    text-align: center;
    th {
      background: #f4f8fe;
      color: #2d82ff;
      border-bottom: 1px solid #43aafa;
      font-weight: 500;
    }
    th ,td {
      text-align: center;
      vertical-align: middle;
      padding: 5px 10px;
      width: fit-content;
      White-space:nowrap;
    }
  }
}

效果：