当前位置: 首页 > article >正文

<table>内有两行<tr>,第一行设定高度为60,剩余第二行,和右侧元素高度补齐。

实现 <table> 内第一行高度设定为 60px,第二行和右侧元素高度补齐的效果,你可以通过 CSS 样式来控制。示例:

  • 为第一行 <tr> 设置固定高度 60px。
  • 对于右侧元素,假设它是一个 <div> 或者其他容器,将其与表格第二行通过布局关联起来,使用 Flexbox 或 Grid 布局让它们高度自动匹配。这里假设右侧元素和表格在一个 <el-row> 中,借助 Flexbox 布局实现高度匹配。
  • <template><!-- ... existing code ... --><el-row :gutter="20" style="display: flex; align-items: stretch;"><el-col :span="12"><div class="table"><div class="table_title">重要社会关系asdfasdfasdf</div><div class="table_subtitle"><div class="table_class">1.bktt</div><div class="cus_label"><span>无此类情况</span><span class="cus_label_box"><span class="cur_label_box_icon">对号</span></span></div></div><div class="table_cont"><table style="width:1024px;border:solid 1px #000"><tbody><tr style="height: 60px;"> <!-- 第一行设置高度为 60px --><td>姓名</td><td>工作单位</td><td>现职</td></tr><tr><td>张三</td><td @click="editCell($event, 0, 1)"><span v-if="!editingCells[0][1]">{{ tableData[0].workUnit }}</span><inputv-elsev-model="tableData[0].workUnit"ref="inputRefs[0][1]"@keydown.enter="onEnter($event, 0, 1)"@keydown.tab="onTab($event, 0, 1)"style="border: none; outline: none; width: 100%;"/></td><td>经理</td></tr><tr><td>李四</td><td>YY 机构</td><td>职员</td></tr></tbody></table></div></div></el-col><el-col :span="12"><!-- 右侧元素 --><div style="background-color: #f0f0f0; padding: 10px;"><!-- 这里可以放置右侧的具体内容 --><el-radio v-model="radio" label="1">备选项</el-radio><el-radio v-model="radio" label="2">备选项</el-radio></div></el-col></el-row><!-- ... existing code ... -->
    </template><script setup>
    // ... existing code ...
    </script><style scoped>
    .table_cont table {height: 100%; /* 确保表格高度占满父容器 */
    }.table_cont table tr {box-sizing: border-box;
    }
    </style>

    第二行,设置高度为100%即可。

相关文章:

<table>内有两行<tr>,第一行设定高度为60,剩余第二行,和右侧元素高度补齐。

实现 <table> 内第一行高度设定为 60px&#xff0c;第二行和右侧元素高度补齐的效果&#xff0c;你可以通过 CSS 样式来控制。示例&#xff1a; 为第一行 <tr> 设置固定高度 60px。对于右侧元素&#xff0c;假设它是一个 <div> 或者其他容器&#xff0c;将其…...

详细解析格式化消息框的代码

书籍&#xff1a;《windows程序设计(第五版)》的开始 环境&#xff1a;visual studio 2022 内容&#xff1a;格式化消息框 说明&#xff1a;以下内容大部分来自腾讯元宝。 封装MessageBoxPrintf 在MessageBoxPrintf()中处理可变参数&#xff0c;通过va_list机制&#xff0c…...

过往记录系列 篇四:年报月行情历史梳理

文章目录 系列文章市场整体走势板块表现资金面与成交量市场风格系列文章 过往记录系列 篇一:牛市板块轮动顺序梳理 过往记录系列 篇二:新年1月份(至春节前)行情历史梳理 过往记录系列 篇三:春节行情历史梳理 市场整体走势 整体趋势:震荡分化,先扬后抑 上涨概率约40%:…...

Jetson Nano 三个版本(B01 4GB、Orin 4GB、Orin 8GB)本地部署Deepseek等大模型的测评

Jetson Nano三个版本&#xff08;B01 GB、Orin 4GB、Orin 8GB&#xff09;本地部署Deepseek等大模型的测评 一、为什么要在终端设备部署大模型&#xff1f;二、 Jetson Nano推理大模型时计算资源占用情况分析为什么测试Jetson Nano?三款Jetson Nano芯片简介 三、大模型推理实验…...

基于Netty实现高性能HTTP服务的架构解析

一、HTTP协议基础 1.1 HTTP协议概述 HTTP&#xff08;HyperText Transfer Protocol&#xff09;作为现代Web应用的基石&#xff0c;是基于TCP/IP的应用层协议&#xff0c;具有以下核心特性&#xff1a; 请求/响应模型&#xff1a;客户端发起请求&#xff0c;服务端返回响应无…...

mac calDAV 日历交互

安装Bakal docker https://sabre.io/dav/building-a-caldav-client/ 在Bakal服务器上注册账户 http://localhost:8080/admin/?/users/calendars/user/1/ 在日历端登录账户&#xff1a; Server: http://127.0.0.1:8080/dav.php Server Path: /dav.php/principals/lion No e…...

【面试问题】Java 接口与抽象类的区别

引言 在 Java 面向对象编程中&#xff0c;接口&#xff08;Interface&#xff09;和抽象类&#xff08;Abstract Class&#xff09;是两个重要的抽象工具。它们都能定义未实现的方法&#xff0c;但设计目标和使用场景截然不同。本文将通过语法、特性和实际案例&#xff0c;深入…...

centos【rockylinux】安装【supervisor】的注意事项【完整版】

重新加载 systemd 配置推荐使用pip的方式安装 pip install supervisor 第二步&#xff1a;添加supervisord.conf配置文件 [unix_http_server] file/tmp/supervisor.sock ; UNIX socket 文件&#xff0c;supervisorctl 会使用 ;chmod0700 ; socket 文件的…...

数据库监控:确保业务连续性和用户体验

在数字化时代&#xff0c;数据库作为企业的数据心脏&#xff0c;其重要性不言而喻。无论是交易系统、客户关系管理系统&#xff0c;还是数据分析平台&#xff0c;都离不开数据库的支撑。然而&#xff0c;数据库的运行状态和性能直接影响着企业的业务连续性和用户体验。因此&…...

Deflate和Gzip压缩在HTTP响应中的作用与实现

1. 引言 HTTP响应压缩是一种优化技术,用于减少传输的数据量,从而提高网页加载速度和带宽利用率。Deflate和Gzip是两种常用的压缩算法,广泛应用于HTTP协议中。 2. Deflate与Gzip概述 2.1 Deflate算法简介 Deflate是一种无损数据压缩算法,结合了LZ77算法和哈夫曼编码。它…...

PointVLA:将 3D 世界注入视觉-语言-动作模型

25年3月来自美的集团、上海大学和华东师大的论文“PointVLA: Injecting the 3D World into Vision-Language-Action Models”。 视觉-语言-动作 (VLA) 模型利用大规模 2D 视觉语言预训练&#xff0c;在机器人任务方面表现出色&#xff0c;但它们对 RGB 图像的依赖&#xff0c;…...

sql server数据迁移,springboot搭建开发环境遇到的问题及解决方案

最近搭建springboot项目开发环境&#xff0c;数据库连的是sql server&#xff0c;遇到许多问题在此记录一下。 1、sql server安装教程 参考&#xff1a;https://www.bilibili.com/opus/944736210624970769 2、sql server导出、导入数据库 参考&#xff1a;https://blog.csd…...

SpringBoot-MVC配置类与 Controller 的扫描

文章目录 前言一、自动配置类位置二、自动配置类解析2.1 WebMvcAutoConfiguration2.1.1 EnableWebMvcConfiguration 2.2 DispatcherServletAutoConfiguration 三、RequestMapping 的扫描过程3.1 RequestMappingHandlerMapping#afterPropertiesSet3.2 RequestMappingHandlerMapp…...

企业年度经营计划制定与管理方法论(124页PPT)(文末有下载方式)

资料解读&#xff1a;企业年度经营计划制定与管理方法论 详细资料请看本解读文章的最后内容。 在企业的发展进程中&#xff0c;年度经营计划的制定与管理至关重要&#xff0c;它犹如企业前行的导航图&#xff0c;指引着企业在复杂多变的市场环境中稳健发展。这份《企业年度经营…...

基于微信小程序的充电桩管理系统

一、开发背景 在开发充电汽车管理系统之前&#xff0c;深入的需求分析至关重要。我们要充分了解不同用户群体的需求&#xff0c;比如私家车主希望充电过程便捷、高效、安全&#xff0c;能够实时查看充电状态和费用明细&#xff1b;出租车、网约车司机则更注重充电速度和充电桩…...

算法模型从入门到起飞系列——递归(探索自我重复的奇妙之旅)

文章目录 前言一、递归本质1.1 递归的要素1.2 递归特点 二、递归&迭代2.1 递归&迭代比较2.2 递归&迭代如何实现相同功能2.2.1 递归实现2.2.2 迭代实现2.2.3 性能对比 三、优雅的递归理解3.1 阶乘计算分解3.2 [DFS](https://blog.csdn.net/qq_38315952/article/deta…...

YOLO+OpenCV强强联手:高精度跌倒检测技术实战解析

目录 关于摔倒检测 摔倒检测核心逻辑 摔倒检测:联合多种逻辑判断 原理详细解释 1. 导入必要的库 2. 定义函数和关键点连接关系 3. 筛选有效关键点并计算边界框 4. 计算人体上下半身中心点和角度 5. 绘制关键点和连接线 6. 绘制角度标注和检测跌倒 7. 返回处理后的图…...

麒麟银河V10服务器RabbitMQ安装

安装步骤 rabbitMQ依赖于erlang的环境&#xff0c;所以需要先安装erlang&#xff0c;erlang跟rabbitMQ是有版本之间的关联关系的&#xff0c;根据对应的版本去安装下载&#xff0c;保证少出问题。 可以通过官网来查看RabbitMQ和erlang之间的版本对应关系 rabbitMQ和erlang之间…...

‌React Hooks主要解决什么

1、‌状态逻辑复用困难 在Hooks出现之前&#xff0c;React组件间的状态逻辑复用主要依赖高阶组件&#xff08;HOC&#xff09;和 render props。 Hooks 通过允许创建自定义Hook&#xff0c;使得状态逻辑的复用变得简单而直接‌ 缺点 HOC 可能导致 props 命名冲突render props …...

extern和static的作用(有例子)

一、extern extern的作用 声明而非定义 extern告诉编译器某个变量或函数存在于其他地方&#xff08;通常是另一个源文件&#xff09;&#xff0c;当前只是声明它&#xff0c;而不是定义它&#xff08;分配内存&#xff09;。定义只能在一个地方出现&#xff0c;而声明可以多次…...

基于C#的以太网通讯实现:TcpClient异步通讯详解

基于C#的以太网通讯实现&#xff1a;TcpClient异步通讯详解 在现代工业控制和物联网应用中&#xff0c;以太网通讯是一种常见的数据传输方式。本文将介绍如何使用C#实现基于TCP协议的以太网通讯&#xff0c;并通过异步编程提高通讯效率。我们将使用TcpClient类来实现客户端与服…...

【8】分块学习笔记

前言 分块是一种重要的高级数据结构思想&#xff0c;核心为大段维护&#xff0c;局部朴素。 顺带一提&#xff0c;由于个人技术水平,本篇博客的难度并没有标题所述的 8 8 8 级。分块还是很难的。 分块 分块&#xff0c;是“优雅的暴力”。 分块的基本思想是把数据分为若干…...

Deployment声明式更新与应用式更新对比

目录 1. 声明式更新 特点 相关命令 示例 2. 命令式更新 特点 相关命令 示例 3. 声明式更新 vs 命令式更新 4. 声明式更新的优势 5. 命令式更新的适用场景 6. 总结 在 Kubernetes 中&#xff0c;声明式更新和命令式更新是两种不同的资源管理方式。它们分别通过不同的…...

【蓝桥杯】省赛:分糖果(思维/模拟)

思路 数据很小&#xff0c;直接暴力模拟。 有意思的是一个列表如何当成循环队列写&#xff1f;可以arr[(i1)%n]让他右边超出时自动回到开头。 code import os import sysn int(input()) arr list(map(int,input().split()))ans 0 while 1:arr1 arr.copy()for i in range…...

在 Go 语言中生成单元测试报告

在 Go 语言中生成单元测试报告&#xff0c;你可以使用 go test 命令配合一些参数来实现。以下是一些常用的方法和步骤&#xff1a; 基本测试&#xff1a;首先&#xff0c;确保你的项目已经编写了测试文件&#xff08;通常以 _test.go 结尾&#xff09;。然后&#xff0c;在项目…...

Metasploit Framework(MSF)使用教程与命令详解

Metasploit Framework&#xff08;简称MSF&#xff09;是一款功能强大的开源渗透测试工具&#xff0c;广泛应用于网络安全领域。它集成了大量的漏洞利用模块&#xff08;exploits&#xff09;、辅助模块&#xff08;auxiliary&#xff09;和载荷&#xff08;payloads&#xff0…...

进程间通信(1)——管道

1. 进程间通信简介 进程间通信&#xff08;Inter-Process Communication&#xff0c;IPC&#xff09;是指不同进程之间交换数据的机制。由于进程具有独立的地址空间&#xff0c;它们无法直接访问彼此的数据&#xff0c;因此需要IPC机制来实现信息共享、数据传递或同步操作。 …...

python基础8 单元测试

通过前面的7个章节&#xff0c;作者学习了python的各项基础知识&#xff0c;也学习了python的编译和执行。但在实际环境上&#xff0c;我们需要验证我们的代码功能符合我们的设计预期&#xff0c;所以需要结合python的单元测试类&#xff0c;编写单元测试代码。 Python有一个内…...

【正点原子K210连载】第七十六章 音频FFT实验 摘自【正点原子】DNK210使用指南-CanMV版指南

第七十六章 音频FFT实验 本章将介绍CanMV下FFT的应用&#xff0c;通过将时域采集到的音频数据通过FFT为频域。通过本章的学习&#xff0c;读者将学习到CanMV下控制FFT加速器进行FFT的使用。 本章分为如下几个小节&#xff1a; 32.1 maix.FFT模块介绍 32.2 硬件设计 32.3 程序设…...

【杂记二】git, github, vscode等

一、前言 暂时空着... 二、git 2.1 可能的疑问 1. VSCode 项目名和 GitHub 仓库名是否需要一致&#xff1f; 不需要一致。 VSCode 项目名&#xff08;也就是你本地的文件夹名字&#xff09;和 GitHub 仓库名可以不一样。 Git 是一个分布式版本控制系统&#xff0c;它主要关…...