表格tr根据内容撑开高度并且每个td继承tr的高度(height:inherit,align-items: stretch)

news2024/11/24 4:20:16

项目设计图
在这里插入图片描述
实际上数据又长又短，例如类型有可能出现2行甚至3行的字数，所以整个行要适配最高的高度，然后其他子元素继承行的高度。
ps：原生的table或者uview的u-table都不怎么好使，所以用view来做
在做的过程中出现高度不一致导致border没能链接上
在这里插入图片描述
弹性布局，行的align-items设置为stretch，不设置高度，可以设置最小高度,height:inherit继承父元素的高度

.tr{
	min-height: 64rpx;
	background: #F5FAFF;
	align-items: stretch !important;
}
.td{
	height:inherit;//不设置高度，继承父元素高度
	word-break:break-all;//宽度不够时，单词进行断句换行
}

word-break:break-all效果图(commission)
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/749237.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

澎湃认证：浪潮信息携手可利邦推出隐私计算一体机解决方案

澎湃认证：浪潮信息携手可利邦推出隐私计算一体机解决方案

北京可利邦与浪潮信息联合发布隐私计算一体机解决方案，以浪潮信息inMerge超融合产品为基础设施平台，预装可利邦隐私计算软件平台，通过SRDC一体机进行整机柜交付，助力客户快速上线隐私计算应用系统。该方案已通过浪潮信息澎湃技术认…
阅读更多...
Node连接Mongodb数据库

Node连接Mongodb数据库

1.初始化 npm init 2.安装mongoose npm i mongoose 3.导入mongoose const mongooserequire("mongoose") 4.连接mongodb服务 mongoose.connect("mongodb://127.0.0.1:27017/user") 说明：mongodb是协议,user是数据库，如果没有会自动创…
阅读更多...
Oracle通过函数调用dblink同步表数据方案（全量/增量）

Oracle通过函数调用dblink同步表数据方案（全量/增量）

创建对应的包，以方便触发调用 /*包声明*/ CREATE OR REPLACE PACKAGE yjb.pkg_scene_job AS /*创建同步任务*/FUNCTION F_SYNC_DRUG_STOCK RETURN NUMBER;/*同步*/PROCEDURE PRC_SYNC_DRUG_STOCK(RUNJOB VARCHAR2) ; END pkg_scene_job; /*包体*/ CREATE OR REPL…
阅读更多...
Dubbo最核心功能——服务暴露的配置、使用及原理

Dubbo最核心功能——服务暴露的配置、使用及原理

系列文章目录 【收藏向】从用法到源码，一篇文章让你精通Dubbo的SPI机制 面试Dubbo ，却问我和Springcloud有什么区别？ 超简单，手把手教你搭建Dubbo工程（内附源码） 文章目录 系列文章目录前言一、服务暴露的…
阅读更多...
idea乱码解决方式大汇总

idea乱码解决方式大汇总

目录 idea版本： 解决方法： 一、基本方法 1. File -> Settings -> Editor 2. 二、Maven乱码解决方法 三、运行时乱码解决方法 四、因为以前乱设置导致的乱码 idea版本： 解决方法： 一、基本方法 1. File -> Setti…
阅读更多...
ETHERCAT主站网关转DEVICENET连接支持ethercat总线的PLC

ETHERCAT主站网关转DEVICENET连接支持ethercat总线的PLC

大家好，今天要和大家分享一款自主研发的通讯网关——远创智控YC-ECTM-DNT。这款产品可是解决了不同协议设备数据交换的麻烦问题，让我们一起来看看它的神奇之处吧！ 这款通讯网关有什么特别的呢？首先，它可以连接DEVICENE…
阅读更多...
vue2 element-ui el-cascader地址省市区分开单独写

vue2 element-ui el-cascader地址省市区分开单独写

使用 npm 或 yarn 安装 element-china-area-data 包&#xff1a; npm install element-china-area-data 在你的代码中导入 element-china-area-data import { regionData } from element-china-area-data let that; 完整代码 <template><div><el-form ref&quo…
阅读更多...
Zookeeper概述及部署

Zookeeper概述及部署

Zookeeper概述及部署 一、Zookeeper 定义二、Zookeeper 特点三、Zookeeper 数据结构四、Zookeeper 应用场景五、Zookeeper选举机制● 第一次启动选举机制● 非第一次启动选举机制 六、部署 Zookeeper 集群1.安装前准备2.安装 Zookeeper 一、Zookeeper 定义 Zookeeper是一个开源…
阅读更多...
leetcode:LCP 06. 拿硬币(python3解法)

leetcode:LCP 06. 拿硬币(python3解法)

难度&#xff1a;简单 桌上有 n 堆力扣币&#xff0c;每堆的数量保存在数组 coins 中。我们每次可以选择任意一堆&#xff0c;拿走其中的一枚或者两枚&#xff0c;求拿完所有力扣币的最少次数。 示例 1&#xff1a; 输入&#xff1a;[4,2,1] 输出&#xff1a;4 解释&#xff1a…
阅读更多...
mysql-分页数据重复

mysql-分页数据重复

背景说明 分页查询不同页出现重复数据&#xff0c;底层实现都是使用limit select * from tt1 limit 100,50 第101条开始的50条数据 select * from tt1 limit 100 前100条记录 select * from tt1 limit 100 offset 50 从51条开始&#xff0c;显示后面的100条 原因分析 以前碰…
阅读更多...
力扣 53. 最大子数组和

力扣 53. 最大子数组和

题目来源&#xff1a;https://leetcode.cn/problems/maximum-subarray/description/ C题解&#xff08;来源代码随想录&#xff09;&#xff1a;难点在于判断什么时候更新count。 是当nums[i]为正数吗&#xff1f;那要nums没有正数怎么办&#xff1b; 是当nums[i]比之前子数组…
阅读更多...
网络监控的关键指标

网络监控的关键指标

网络监控是 IT 的支柱&#xff0c;对于防止可能困扰您的业务的计划外中断至关重要。这就是为什么投资网络监控解决方案是一个明智而安全的举动。特别是随着远程工作成为常态&#xff0c;监控工具使公司能够从世界任何地方监控网络&#xff0c;并有助于在整个过程中保持最佳性能…
阅读更多...
小程序：页面跳转闪屏

小程序：页面跳转闪屏

自己的笔记&#xff0c;随手记录。扛精走开。 1、问题描述 进入页面&#xff0c;是一个组件&#xff0c;通过路由传参判断是由哪个页面进入&#xff0c;不同的页面拿的已选值不一样&#xff0c;需要回显值&#xff0c;在编辑数据。此时会出现一个问题&#xff0c;A页面中进来…
阅读更多...
运输问题案例

运输问题案例

案例1 运输问题 某部门有3个生产同类型产品的产地&#xff0c;生产的产品由4个销售点出售&#xff0c;各工厂的生产量、各销售点的销售量以及各工厂到各销售点的单位运价&#xff08;元/吨&#xff09;如表1所示&#xff0c;求最佳调运方案&#xff1f; 表1 运输信息 产地\销地…
阅读更多...
general 未设置cookie的Secure标志位

general 未设置cookie的Secure标志位

解决方案: 在配置文件中增加相应配置即可完成配置&#xff1a; <system.web><httpCookies httponlyCookies"true" requireSSl"true"/></system.web>添加完成后如下所示:
阅读更多...
ens33没有inet地址

ens33没有inet地址

1&#xff09;切换到根用户 su - root 按提示输入密码&#xff08;不切换到根用户没有权限修改文件&#xff09; &#xff08;2&#xff09;输入cd /etc/sysconfig/network-scripts/ &#xff08;3&#xff09;输入vi ifcfg-ens33 ifcfg-ens33 &#xff08;4&#xff09;光标移…
阅读更多...
深/浅拷贝

深/浅拷贝

现在有一个我们自定义的Person对象,如何去克隆这个对象? class Person{public int id;Overridepublic String toString() {return "Person{" "id" id };} } public class Test2 {public static void main(String[] args) {Person person1 new Person()…
阅读更多...
ATFX国际：美国CPI骤降至3%，高通胀问题或不复存在

ATFX国际：美国CPI骤降至3%，高通胀问题或不复存在

ATFX国际&#xff1a;美国通胀率数据搅动国际金融市场。6月未季调CPI年率&#xff0c;最新值3%&#xff0c;低于前值4%和预期值3.1%&#xff1b;6月未季调核心CPI年率&#xff0c;最新值4.8%&#xff0c;低于前值5.3%&#xff0c;低于预期值5%。名义CPI和核心CPI数据双双大降&a…
阅读更多...
c++从源文件到可执行文件经历了什么

c++从源文件到可执行文件经历了什么

1.c从源文件到可执行文件经历了什么 在linux平台上 main.c —> a.out 在windows平台上 main.c --> xx.exe gcc -E main.c -o main.i // 预处理 gcc -S main.i -o main.s // 编译 gcc -c main.s -o main.o // 汇编 gcc main.o -o hello //链接
阅读更多...
软件测试面试题 —— 整理与解析（3）

软件测试面试题 —— 整理与解析（3）

&#x1f60f;作者简介&#xff1a;博主是一位测试管理者&#xff0c;同时也是一名对外企业兼职讲师。 &#x1f4e1;主页地址&#xff1a;&#x1f30e;【Austin_zhai】&#x1f30f; &#x1f646;目的与景愿&#xff1a;旨在于能帮助更多的测试行业人员提升软硬技能&#xf…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023