用div结合css的流式布局做动态表格

效果示例： 代码示例：

![]RMR}_CK20JC$EFW1RXJJ.png](p6-juejin.byteimg.com/tos-cn-i-k3…?)

css示例：

.cus-th {
  display: flex;
  /*flex-direction: column;*/
  width: 1400px;
}

.field {
  width: 200px;
  height: 50px;

  border-bottom: black solid 1px;
  border-top: black solid 1px;
  /*border-right: black solid 1px;*/
  border-left: black solid 1px;
}

.field1 {
  width: 200px;
  height: 50px;

  border-bottom: black solid 1px;
  border-top: black solid 1px;
  /*border-right: black solid 1px;*/
  border-right: black solid 1px;
  border-left: black solid 1px;
}

.cus-p {
  text-align: center;
}
.cus-body{
  display: flex;
  width: 1400px;
}
.cus-body-task{
  display: flex;
  flex-direction: column;
  width: 1200px;
}
.cus-body-s-and-t{
  display: flex;

}
.cus-body-short{
  display: flex;
  width: 1200px;
}
.cus-body-short-item{
  border-collapse:collapse;
  width: 1000px;
}
.cus-field{
  width: 200px;
  border-bottom: black solid 1px;
  border-right: black solid 1px;
  border-left: black solid 1px;
}
.item{
  width: 200px;
  border-right: black solid 1px;
  border-bottom: black solid 1px;

}

.b {
  width: 200px;
  border-bottom: black solid 1px;
  border-right: black solid 1px;
}

.cus_baseinfo {
  text-decoration: underline;
}

.cus-field-1 {
  width: 200px;
  border-bottom: black solid 1px;
  /*border-right: black solid 1px;*/
  border-left: black solid 1px;
  height: 100px;
}

.cus-field-2 {
  width: 200px;
  border-bottom: black solid 1px;
  border-right: black solid 1px;
  border-left: black solid 1px;
  height: 100px;
}
.all-table {
  width: 1200px;
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 100px;
}
.cus-field{
  width: 400px;
}
.other-table{
  width: 800px;
}
thead th{
  /*text-align: left;*/
  background-color: #fafafa;
}
th,td {
  /*padding-left: 20px;*/
  border: 1px solid #e9eaec;
  line-height: 30px;
}
.tg{
  width: 800px;
  /*border: 1px solid #ccc;*/
  border-collapse: collapse;
}

数据格式：

![%)P9Q6@M7G90AU~]X78(Q8G.png](p9-juejin.byteimg.com/tos-cn-i-k3…?)

对于动态跨行跨列的表格想到了采取这种方式，Css+div+vue的循环语句做；也可以采用表格嵌套表格的方式；还有编写方法函数限制跨行跨列，这种方法有待进一步探究。