css巧用表格布局制作table

CSS巧用表格布局制作table

需求

典型的表格布局，但是使用的时候有问题，直接上代码吧

<template>
    <div class="tabs">
      <div v-for="(item,ind) in tab" :key="ind" class="tabs_i">
        <div v-for="(subset,key) in item" :key="ind+key" class="tabs_i_i">
          <div class="tabs_i_i_l">
            <div class="tabs_i_i_l_text">{{subset.title}}分div>
          div>
          <div class="tabs_i_i_r">{{subset.text}}div>
        div>
      div>
    div>
template>
<script>
export default {
  props: {

  },
  data() {
    return {
        tab:[
        [
          {
            title:"1",
            text:"不到交谈声和大部分环境声音"
          },
          {
            title:"1",
            text:"不到交谈声和大部分环境声音"
          },
        ],
        [
          {
            title:"1",
            text:"不到交谈声和大部分环境声音"
          },
          {
            title:"1",
            text:"不到交谈声和大部分环境声音"
          },
        ],
        [
          {
            title:"1",
            text:"不到交谈声和大部分环境声音"
          },
          {
            title:"1",
            text:"听不到交谈声和大部分环境声音听不到交谈声和大部分环境声音听不到交谈声和大部分环境声音听不到交谈声和大部分环境声音"
          },
        ],
        [
          {
            title:"1",
            text:"不到交谈声和大部分环境声音"
          },
          {
            title:"1",
            text:"听不到交谈声和大部分环境声音听不到交谈声和大部分环境声音听不到交谈声和大部分环境声音听不到交谈声和大部分环境声音"
          },
        ],
        [
          {
            title:"1",
            text:"不到交谈声和大部分环境声音"
          },
          {
            title:"1",
            text:"听不到交谈声和大部分环境声音听不到交谈声和大部分环境声音听不到交谈声和大部分环境声音听不到交谈声和大部分环境声音"
          },
        ]
      ]
    }
  }
}
script>
<style lang="scss">
.tabs{
    margin: 0 auto;
    border-radius: 0.94rem;
	  border: solid 0.06rem #e8ecef;
    margin-bottom: 5rem;
    width: auto;
    display: table;
    text-align: left;
    overflow: hidden;
    &_i{
      display: table-row;
      &_i{
        display: table-cell;
        font-size: 1.25rem;
        height: 100%;
        position: relative;
        vertical-align: middle;
        border-bottom: solid 0.06rem #e8ecef;
        &_l{
          display: inline-block;
          width: 6.25rem;
          height: 100%;
	        background-color: #f2f3f7;
          color: #c5003e;
          text-align: center;
          font-weight: bold;
          position: absolute;
          top: 0;
          &_text{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 100%;
            text-align: center;
          }
        }
        &_r{
          display: inline-block;
          max-width: 37rem;
          line-height:1.3;
          padding:1rem 2.5rem;
          padding-left: 7.45rem;
          height: 100%;
          font-size: 1.25rem;
        }
      }
    }
  }
style>