问答

关于自己写的 table 组件上下居中的问题

作者:admin 2021-07-14 我要评论

如何让 3 上下居中, 不是 table 布局的 原图是这样的 想实现一个合并行的功能 数据不需要关注随意字符串 ### 改变布局,红色为table,绿色为tr 下面的数据分成左...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

image.png
如何让 3 上下居中,
image.png
不是 table 布局的
原图是这样的
image.png
想实现一个合并行的功能 数据不需要关注随意字符串

###

image.png

改变布局,红色为table,绿色为tr
下面的数据分成左右两个table,然后左边的数据flex布局垂直居中下就好了

###

首先先分析一下问题:
标题要求:table 居中
内容要求:合并单元格

所以,其实真正的目的是解决合并单元格之后的居中问题
那么,我们可以先看一下成熟 ui 框架的案例:推荐个 ele-ui

<tr class="el-table__row">
    <td rowspan="2" colspan="1" class="el-table_22_column_90  ">
        <div class="cell">12987122</div>
    </td>

感觉还是 table 格式的好解决合并的问题 ...
主流的几个框架看了一圈都是 table元素 来解决表格的问题,除非你不准备搞定合并的问题

或者按照模板逆推 ...
生成 position:absolute 的 div 挡住应该显示的合并区域?
感觉思路不是很靠谱的样子

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • 关于自己写的 table 组件上下居中的问

    关于自己写的 table 组件上下居中的问

  • 用了token机制是不是每次刷新页面都要

    用了token机制是不是每次刷新页面都要

  • 项目中使用TS时,像React等第三方库,

    项目中使用TS时,像React等第三方库,

  • websoket入门问题

    websoket入门问题

腾讯云代理商
海外云服务器