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

news2025/3/20 14:58:31

实现 <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>
                      <input
                        v-else
                        v-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%即可。

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

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

相关文章

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

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

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芯片简介 三、大模型推理实验…

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…

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

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

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

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

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之间…

extern和static的作用(有例子)

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

【8】分块学习笔记

前言 分块是一种重要的高级数据结构思想&#xff0c;核心为大段维护&#xff0c;局部朴素。 顺带一提&#xff0c;由于个人技术水平,本篇博客的难度并没有标题所述的 8 8 8 级。分块还是很难的。 分块 分块&#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…

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

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

【正点原子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;它主要关…

《基于Spring Boot+Vue的智慧养老系统的设计与实现》开题报告

个人主页:@大数据蟒行探索者 一、研究背景及国内外研究现状 1.研究背景 根据1982年老龄问题世界大会联合国制定的标准,如果一个国家中超过65岁的老人占全国总人口的7%以上,或者超过60岁的老人占全国总人口的10%以上,那么这个国家将被定义为“老龄化社会”[1]。 随着国…

ModBus TCP/RTU互转(主)(从)|| Modbus主动轮询下发的工业应用 || 基于智能网关的串口服务器进行Modbus数据收发的工业应用

目录 前言 一、ModBus TCP/RTU互转&#xff08;从&#xff09;及应用|| 1.1 举栗子 二、ModBus TCP/RTU互转&#xff08;主&#xff09; 2.1 举栗子 三、ModBus 主动轮询 3.1 Modbus主动轮询原理 3.2 Modbus格式上传与下发 3.2.1.设置Modbus主动轮询指令 3.2.2 设…

【HarmonyOS Next之旅】DevEco Studio使用指南(三)

目录 1 -> 一体化工程迁移 1.1 -> 自动迁移 1.2 -> 手动迁移 1.2.1 -> API 10及以上历史工程迁移 1.2.2 -> API 9历史工程迁移 1 -> 一体化工程迁移 DevEco Studio从 NEXT Developer Beta1版本开始&#xff0c;提供开箱即用的开发体验&#xff0c;将SD…