flex绘制table表格，支持文字自动换行和合并单元格，高度自适应

已于 2024-07-07 19:40:11 修改
阅读量82 收藏
点赞数 3
文章标签： 前端 html javascript
于 2024-07-07 17:09:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/machaowo/article/details/140248855
版权

一、flex布局方法和属性教程

1、参考链接flex布局教程；

2、简单理解

01--容器属性

  • flex-direction               左右，上下布局
  • flex-wrap                     是否换行，反向换行
  • flex-flow                      包含flex-direction和flex-wrap 属性
  • justify-content             项目(子元素)是否水平居中
  • align-items                  项目(子元素)是否水平居中
  • align-content               项目(子元素)多根轴线(多列)是否水平居中

03--项目属性

  • order                           子元素排列顺序
  • flex-grow                     子元素放大，默认等比
  • flex-shrink                   子元素缩小，默认等比
  • flex-basis                     可以设定子元素固定大小
  • flex                               flex-grow, flex-shrink 和 flex-basis的简写
  • align-self                      子元素自定义垂直对齐方式

flex绘制table表格，支持文字自动换行，高度自适应(宽度固定)

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <div class="table">
            <div class="flex-box header">
                <div class="flex-cell1 border-rb">
                    <div>序号XXXXXXXXXXXXXXXXXX</div>  
                </div>
                <div class="flex-cell2 border-rb">配件名称xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>
                
                <div class="flex-cell3 border-rb">
                    <div class="lossAssessment">
                        <div>
                            <div>定损xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>
                        </div>
                    </div>
                    <div class="lossAssessmentContent">
                        <div class="price border-tr" >价格</div>
                        <div class="count border-t">数量</div>
                    </div>
                </div>
                <div class="flex-cell4 border-b">
                    <div>
                        <div>小计</div>
                    </div>
                    
                </div>
            </div>
            <div class="flex-box tableBody">
                <div class="flex-row">
                    <div class="flex-cell1 border-rb">序号XXXXXXXXXXXXXXXXXXXX</div>
                    <div class="flex-cell2 border-rb">配件名称</div>
                    <div class="flex-cell3 border-rb">价格</div>
                    <div class="flex-cell4 border-rb">数量</div>
                    <div class="flex-cell5 border-rb">小计</div>
                </div>
                <div class="flex-row">
                    <div class="flex-cell1 border-rb">序号</div>
                    <div class="flex-cell2 border-rb">配件名称</div>
                    <div class="flex-cell3 border-rb">价格</div>
                    <div class="flex-cell4 border-rb">数量</div>
                    <div class="flex-cell5 border-rb">小计</div>
                </div>
                <div class="flex-row">
                    <div class="flex-cell1 border-rb">序号</div>
                    <div class="flex-cell2 border-rb">配件名称</div>
                    <div class="flex-cell3 border-rb">价格</div>
                    <div class="flex-cell4 border-rb">数量xxxxxxxxxxxxxxxxxxxxxx</div>
                    <div class="flex-cell5 border-rb">
                        小计
                    </div>
                </div>
                
            </div>
            
          
        </div>
        <style lang="scss">
            .table{
                width: 300px;
                border: 1px solid #666;
                word-wrap: break-word;
                margin: 0 auto;
                .header{
                    /* width: 300px; */
                    display: flex;
                    flex-direction: row;
                    flex-wrap: nowrap;
                    color: #666;
                    font-size: 14px;
                    text-align: center;
                    box-sizing: border-box;
                    .flex-cell1{
                        width: 50px;
                    }
                    
                    .flex-cell2{
                        width: 100px;
                    }
                    .flex-cell3{
                        width: 100px;
                        display: flex;
                        flex-direction: row;
                        flex-wrap: wrap;

                        .lossAssessment{
                            width: 100%;
                        }
                        .lossAssessmentContent{
                            display: flex;
                            flex-direction: row;
                            flex-wrap: nowrap;
                            .price{
                                width: 50px;
                            }
                            .count{
                                width: 50px;
                            }
                            
                        }
                    }
                    .flex-cell4{
                        width: 50px;
                    }
                }
                .tableBody{
                    .flex-row{
                        display: flex;
                        flex-direction: row;
                        flex-wrap: nowrap;
                        color: #666;
                        font-size: 14px;
                        text-align: center;
                        box-sizing: border-box;
                        .flex-cell1{
                            width: 50px;
                        }
                        .flex-cell2{
                            width: 100px;
                        }
                        .flex-cell3{
                            width: 50px;
                        }
                        .flex-cell4{
                            width: 50px;
                        }
                        .flex-cell5{
                            width: 50px;
                        }
                        .border-rb:last-child{
                            border-right: none !important;
                        }
                    }

                    .flex-row:last-child{
                        .border-rb{
                            border-bottom: none !important;
                        }
                    }

                    

                    
                    
                   
                }

                .border-t{
                    border-top: 1px solid #666;
                    box-sizing: border-box;
                }

                .border-tr{
                    border-right: 1px solid #666;
                    border-top: 1px solid #666;
                    box-sizing: border-box;
                }
                .border-rb{
                    border-right: 1px solid #666;
                    border-bottom: 1px solid #666;
                    box-sizing: border-box;
                }
                .border-b{
                    border-bottom: 1px solid #666;
                    box-sizing: border-box;
                }
                

            }
            
        </style>    
    </body>
</html>

月语晨风
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
flex实现数据表格。
06-06
一个flex写的实现数据表格datagrid的实例。
Flex Grid制作复杂表格
07-29
直接就可用，如不明白可以去博客中查找相关内容。
flex画表格实例
javaee_jsp的专栏
02-14 359
  样式： mx|Grid { borderStyle: solid; letterSpacing:0; horizontalGap:-1; verticalGap:-1; paddingLeft:-1; paddingTop:-1; paddingRight:-1; paddingBottom:-1; } mx|GridItem{ borderSty...
flex_可编辑表格示例;
cenyebao的专栏
03-14 3025
=>TheEditableGridItemEditor(自定义组件)          xmlns:s="library://ns.adobe.com/flex/spark"          xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="init()">
flex布局表格，有些没加
zhangnx10000的博客
03-03 245
flex布局，含旧版和新版之间的比较
button自适应高度和自动换行
07-14
"button自适应高度和自动换行"这个主题主要关注如何让按钮在不同屏幕尺寸和内容长度下保持良好的视觉效果。以下是对这个主题的详细解释： 一、自适应高度 1. CSS Flexbox：使用Flexbox布局模型可以轻松实现按钮的...
vue flex 布局实现div均分自动换行的示例代码
12-28
 一、关于flex布局我建议去看一下http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html这篇博客，我们主要用到flex布局的一个换行属性，它是flex-wrap: wrap，自动换行。 二、vue代码 （1）html部分： &...
Vue 自适应高度表格的实现方法
11-20
在这个场景下，我们需要创建一个名为 `v-adaptive` 的指令，以实现表格高度根据窗口大小动态调整。 首先，我们创建一个名为 `src/directive/el-table/adaptive.js` 的文件，导入 `addResizeListener` 和 `...
微信小程序实现的绘制table表格功能示例
10-17
在微信小程序中，绘制table表格是一项常见的需求，用于展示数据或进行数据分析。下面将详细介绍如何在微信小程序中实现这一功能，以及涉及到的数据读取和界面布局相关操作。 首先，我们需要理解微信小程序的基本...
Flex Label自动截取、自动换行代码
10-27
Flex Label经常会使用到它的自动截取、自动换行代码如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助
flex表格复制
05-27
NULL 博文链接：https://leopard0825.iteye.com/blog/585623
flex导出excel表格
09-28
flex导出成excel部分代码
Flex布局
qq_60893085的博客
02-13 963
flex系统总结
Flex布局总结(详细)
热门推荐
MaNqo的博客
07-27 1万+
Flex布局 以前在网页开发过程中，布局一直是不可或缺的，从最早的表格布局，到后来的DIV+CSS布局，现在再到CSS3的伸缩布局。最近在写小程序的项目中flex布局用得非常多，其适应性也非常强，其强大的伸缩性，发挥了极大的作用，因此就在这里整理一下flex布局的知识。 参考链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex 首先先明确一下主轴和侧轴的意思： 主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向（x轴正向） 侧轴：
【CSS基础知识】flex布局、table 布局 和 grid布局
weixin_63681863的博客
09-07 621
flex display grid布局介绍和代码实战
flex布局下el-table表格高度自适应、表格头部固定
最新发布
JCAL123的博客
01-03 664
flex布局下el-table表格高度自适应、表格头部固定
flex grid布局
m0_61894608的博客
08-01 1103
file grid
Table布局 flex布局 grid布局
m0_70146580的博客
01-02 1262
table布局 flex布局 grid布局
FLEX高级表格MecGrid
俊哥
07-08 1083
前言：几个月前，因为项目需要探索了MecGrid，后来种种原因没有使用。网上的资料不是很多，特意放上来，有兴趣的一起交流学习。本文主要内容参考自MecGrid作者博客：http://www.mechansp.com/  一、主要特性可以得到横纵列的索引支持鼠标滚动支持分成结构（即
vue flex布局 文字自动换行
09-02
在 Vue 中使用 flex 布局，可以通过设置 `flex` 属性和 `flex-wrap` 属性来实现文字的自动换行。 首先，在你的 Vue 组件中，使用以下样式来定义一个 flex 容器： ```html <div class="flex-container"> <!-- 内容 --> </div> ``` 然后，在对应的样式文件（例如，`.vue` 文件中的 `<style>` 标签内或单独的 `.css` 文件）中，添加以下样式： ```css .flex-container { display: flex; flex-wrap: wrap; /* 允许内容自动换行 */ } .flex-container > * { flex: 0 0 auto; /* 设置子元素不自动扩展 */ } ``` 通过设置 `flex-wrap: wrap;`，容器中的内容将会自动换行。同时，使用 `flex: 0 0 auto;` 可以确保子元素不自动扩展，并且适应其内容的宽度。 这样，文字在容器中超出一行时，将会自动换行并适应容器的宽度。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值