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

.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;
    }
  }
}

效果：

 

结论：父容器tableBox固定宽度，th、td使用White-space:nowrap;不换行，加上width: fit-content;宽度自适应，padding优化间距