css巧用表格布局制作table

最新推荐文章于 2024-05-14 16:52:58 发布

行路-前端

最新推荐文章于 2024-05-14 16:52:58 发布

阅读量830

点赞数 1

分类专栏：前端分享文章标签： css 前端 html

本文链接：https://blog.csdn.net/ZHANGFENGGANG236/article/details/127817390

版权

前端分享专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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>