html写一个table表

HTML代码:

          <div class="table_box w-full"><div class="title_top">XX表</div><div class="title_btm">(<input class="input input_1" type="text">xxxx)</div><table class="table w-full"><thead><tr><td style="width: 50%;" colspan="5">时间:<input class="input input_2" type="text" maxlength="4">年<input class="input input_3" type="text" maxlength="2">月<input class="input input_4" type="text" maxlength="2">日 星期<input class="input input_5" type="text" maxlength="1"></td><td style="width: 50%;" colspan="5"><div class="w-full flex items-center"><div class="w-1/2  flex items-center">地点:<input class="input input_6" type="text"></div><div class="w-1/2  flex items-center">方式:<input class="input input_6" type="text"></div></div></td></tr><tr style="position: relative"><td style="width: 100%;" colspan="10"><br /><br />评审人:<input class="input input_7" type="text"><br /><br /><br />参加人员:<input class="input input_8" type="text"><br /><br /><br /></td><divstyle="position: absolute;bottom: 0;right: 0;display: flex;align-items: center;cursor: pointer;padding: 2px;font-size: 12px;">+ 新增建议</div></tr><tr><td colspan="1" class="text-center">序号</td><td colspan="4" class="text-center">建议</td><td colspan="5" class="text-center">修改意见</td></tr><!-- 序号 --><tr><td colspan="1" class="text-center">1</td><td colspan="4" class="text-center"><input class="input input_9" type="text"></td><td colspan="5" class="text-center"><input class="input input_9" type="text"></td></tr><tr><td colspan="1" class="text-center">2</td><td colspan="4" class="text-center"><input class="input input_9" type="text"></td><td colspan="5" class="text-center"><input class="input input_9" type="text"></td></tr><tr><td colspan="1" class="text-center">3</td><td colspan="4" class="text-center"><input class="input input_9" type="text"></td><td colspan="5" class="text-center"><input class="input input_9" type="text"></td></tr><tr><td style="width: 100%;" colspan="10"><div class="flex flex-col flex-grow w-full"><div>意见: </div><textarea class="input input_10" rows="6" cols="50"></textarea></div><div class="flex items-center justify-end mt-4">签字/日期:<input class="input input_11" type="text"></div></td></tr></thead></table><div style="width: 95%;display: flex;margin:8px auto;line-height: 22px;"><div>注:</div><div style="display: flex;flex-flow: column"><div>1.xxxxxxxxxxxxxxx。</div><div>2.xxxxxxxxxxxxxxx。</div></div></div></div>

 CSS代码:

.table_box {width: 100%;font-family: '宋体' !important;color: #000 !important;.input {outline: none;border: 0;border-bottom: 1px solid #000;color: #000;}.input_1 {font-size: 20px;text-align: center;width: 250px;}.input_2 {font-size: 14px;text-align: center;width: 40px;}.input_3 {font-size: 14px;text-align: center;width: 30px;}.input_4 {font-size: 14px;text-align: center;width: 30px;}.input_5 {font-size: 14px;text-align: center;width: 30px;}.input_6 {font-size: 14px;text-align: center;width: 100px;border: 0;}.input_7 {font-size: 14px;text-align: left;width: 612px;border: 0;}.input_8 {font-size: 14px;text-align: left;width: 500px;border: 0;}.input_9 {font-size: 14px;text-align: center;width: 100%;height: 100%;border: 0;}.input_10 {width: 100%;font-size: 14px;// text-align: center;width: 100%;border: 0px solid #000;margin-top: 10px;resize: none;}.input_11 {font-size: 14px;text-align: left;width: 250px;border: 0px solid #000;}.title_top,.title_btm {display: flex;align-items: center;justify-content: center;font-weight: 700;}.title_top {font-size: 25px;}.title_btm {font-size: 20px;margin: 15px 0;}.table {width: 100%;border-collapse: collapse;.text-center {text-align: center !important;}th,td {border: 1px solid black;padding: 8px;text-align: left;}}
}

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

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

相关文章

【Linux】内存级文件

目录 C语言关于文件操作的函数 Linux关于文件操作的系统调用 完善myshell C语言缓冲区 其实我们在C语言就学过文件操作&#xff0c;但是从语言的角度&#xff0c;我们只是说会用了关于文件的一些操作和函数&#xff0c;但其实它究竟是怎么回事我们其实并不明白&#xff0c;…

rust学习(字节数组转string)

最新在写数据传输相关的操作&#xff0c;发现string一个有趣的现象&#xff0c;代码如下&#xff1a; fn main() {let mut data:[u8;32] [0;32];data[0] a as u8;let my_str1 String::from_utf8_lossy(&data);let my_str my_str1.trim();println!("my_str len is…

STM32实验之USART串口发送+接受数据(二进制/HEX/文本)

涉及三个实验&#xff1a; 1.USART串口发送和接收数据 我们使用的是将串口封装成为一个Serial.c模块.其中包含了 void Serial_Init(void);//串口初始化 void Serial_SendByte(uint8_t Byte);//串口发送一个字节 void Serial_SendArray(uint8_t *Array,uint16_t Length);//…

【C语言】详解函数(上)(庖丁解牛版)

文章目录 1. 前言2. 函数的概念3.库函数3.1 标准库和头文件3.2 库函数的使用3.2.1 头文件的包含3.2.2 实践 4. 自定义函数4.1 自定义函数的语法形式4.2 函数的举例 5. 形参和实参5.1 实参5.2 形参5.3 实参和形参的关系 6. return 语句6. 总结 1. 前言 一讲到函数这块&#xff…

栈排序00

题目链接 栈排序 题目描述 注意点 对栈进行排序使最小元素位于栈顶最多只能使用一个其他的临时栈存放数据不得将元素复制到别的数据结构&#xff08;如数组&#xff09;中栈中的元素数目在[0, 5000]范围内 解答思路 本题是要实现一个小顶堆&#xff0c;可以直接使用Priori…

上位机图像处理和嵌入式模块部署(f407 mcu中的udp server开发)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 既然lwip已经port到407上面了&#xff0c;接下来其实就可以做一些测试了。本身lwip支持tcp、udp&#xff0c;也支持client和server&#xff0c;既然…

【数据分享】中国第三产业统计年鉴(1991-2022)

大家好&#xff01;今天我要向大家介绍一份重要的中国第三产业统计数据资源——《中国第三产业统计年鉴》。这份年鉴涵盖了从1991年到2022年中国第三产业统计全面数据&#xff0c;并提供限时免费下载。&#xff08;无需分享朋友圈即可获取&#xff09; 数据介绍 每年的《中国…

2004NOIP普及组真题 3. FBI树

线上OJ 地址&#xff1a; [04NOIP普及组] FBI树 本题的意思是&#xff1a;给定一个 01字符串 &#xff08;对应一棵完全二叉树的最后一层叶子节点&#xff09;&#xff0c;将树的每一个节点的值用字母“F、B、I”表示。规则&#xff08;如下图所示&#xff09;为&#xff1a; 1…

Spring AI 第二讲 之 Chat Model API 第二节Ollama Chat

通过 Ollama&#xff0c;您可以在本地运行各种大型语言模型 (LLM)&#xff0c;并从中生成文本。Spring AI 通过 OllamaChatModel 支持 Ollama 文本生成。 先决条件 首先需要在本地计算机上运行 Ollama。请参阅官方 Ollama 项目 README&#xff0c;开始在本地计算机上运行模型…

curl 92 HTTP/2 stream 5 was not closed cleanly: CANCEL

source ~/.bash_profile flutter clean Command exited with code 128: git fetch --tags Standard error: 错误&#xff1a;RPC 失败。curl 92 HTTP/2 stream 5 was not closed cleanly: CANCEL (err 8) 错误&#xff1a;预期仍然需要 2737 个字节的正文 fetch-pack: unexpec…

GPT革命:AI如何重塑我们的未来!

GPT革命&#xff1a;AI如何重塑我们的未来&#xff01; &#x1f604;生命不息&#xff0c;写作不止 &#x1f525; 继续踏上学习之路&#xff0c;学之分享笔记 &#x1f44a; 总有一天我也能像各位大佬一样 &#x1f3c6; 博客首页 怒放吧德德 To记录领地 &#x1f31d;分享…

普通人也能弄的 16 个AI搞钱副业,门槛低,易上手!

大家好&#xff0c;我是灵魂画师向阳 本期给大家分享的是利用AI 做副业的一些方法&#xff0c;大家可以挑选适合自己的赛道去搞钱 现在是人工智能时代&#xff0c;利用好AI 工具&#xff0c;可以降低普通人做副业的门槛&#xff0c;同时也能提高工作效率&#xff0c; 因此AI …

【微机原理与汇编语言】循环程序设计

一、实验目的 1.熟练掌握8086/8088常用汇编指令的使用方法 2.熟练掌握循环结构程序编程技巧 3.熟练掌握汇编语言程序运行调试方法 二、实验要求 认真分析实验题目&#xff0c;设计程序流程图&#xff0c;独立完成代码编写及运行调试。 三、实验题目 给出不大于255的十个…

图片裁剪与上传处理方案 —— 基于阿里云 OSS 处理用户资料

目录 01: 通用组件&#xff1a;input 构建方案分析 02: 通用组件&#xff1a;input 构建方案 03: 构建用户资料基础样式 04: 用户基本资料修改方案 05: 处理不保存时的同步问题 06: 头像修改方案流程分析 07: 通用组件&#xff1a;Dialog 构建方案分析 08: 通用组件&…

计算机组成原理·考点知识点整理

根据往年考试题&#xff0c;对考点和知识点的一个整理。 校验编码 码距 一种编码的最小码距&#xff0c;其实就是指这种编码的码距。码距有两种定义&#xff1a; 码距所描述的对象含义 2 2 2 个特定的码其二进制表示中不同位的个数一种编码这种编码中任意 2 2 2 个合法编码的…

【linux进程控制(三)】进程程序替换--如何自己实现一个bash解释器?

&#x1f493;博主CSDN主页:杭电码农-NEO&#x1f493;   ⏩专栏分类:Linux从入门到精通⏪   &#x1f69a;代码仓库:NEO的学习日记&#x1f69a;   &#x1f339;关注我&#x1faf5;带你学更多操作系统知识   &#x1f51d;&#x1f51d; 进程程序替换 1. 前言2. exec…

【JMeter接口自动化】第8讲 Fiddler抓包Jmeter

1&#xff09;配置好Fiddler 设置Fiddler-Tools-Options-HTTPS 设置Fiddler-Tools-Options-Connections&#xff0c;设置端口为8888 2&#xff09;查看IP 在CMD中输入ipconfig 查看IP地址 3&#xff09;配置Jmeter Http请求——基本&#xff0c;设置Http请求&#xff0c;使用…

北航数据结构与程序设计第四次作业选填题复习

首先都是线性的&#xff0c;线性包括顺序和链式&#xff0c;栈和队都可以用两种方式实现。栈只能存于栈顶取于栈顶&#xff0c;队列先进先出&#xff0c;因此存取点是固定的。 函数栈帧创建原理 画图即可。 A.显然不行&#xff0c;5如果第一个出来说明5是最后一个进的&#xf…

Lambda表达式与函数式工具在Python中的应用详解

目录 一、引言 二、Lambda表达式 Lambda表达式的定义 Lambda表达式的使用场景 Lambda表达式的示例 三、函数式工具 map()函数 filter()函数 reduce()函数 itertools模块 functools模块 四、Lambda表达式与函数式工具的结合使用 五、Lambda表达式与函数式工具的注意…

【云岚家政】-day00-开发环境配置

文章目录 1 开发工具版本2 IDEA环境配置2.1 编码配置2.2 自动导包设置2.3 提示忽略大小写2.4 设置 Java 编译级别 3 Maven环境3.1 安装Maven3.2 配置仓库3.3 IDEA中配置maven 4 配置虚拟机4.1 导入虚拟机4.2 问题 5 配置数据库环境5.1 启动mysql容器5.2 使用MySQL客户端连接数据…