html写一个table表

news2024/10/7 4:31:08

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>
                  <div
                    style="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.coloradmin.cn/o/1806210.html

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

相关文章

Jenkins构建打包部署前端Vue项目至Nginx

一. 安装jenkins 基于DockerJenkins实现自动部署SpringBootMaven项目-CSDN博客 二. 安装NodeJs插件并配置 显示上面两行则表示安装成功, 然后回到首页, 点击’系统管理’->‘全局工具配置’: 配置node.js 三. 创建jenkins项目 1、创建项目 2、配置gitee 3、配置源码 4、…

kafka如何保证消息不丢失

Kafka发送消息是异步发送的&#xff0c;所以我们不知道消息是否发送成功&#xff0c;所以会可能造成消息丢失。而且Kafka架构是由生产者-服务器端-消费者三种组成部分构成的。要保证消息不丢失&#xff0c;那么主要有三种解决方法。 生产者(producer)端处理 生产者默认发送消息…

qmt量化交易策略小白学习笔记第16期【qmt编程之获取北向南向资金(沪港通,深港通和港股通)】

qmt编程之获取北向南向资金 qmt更加详细的教程方法&#xff0c;会持续慢慢梳理。 也可找寻博主的历史文章&#xff0c;搜索关键词查看解决方案 &#xff01; 北向南向资金&#xff08;沪港通&#xff0c;深港通和港股通&#xff09; #北向南向资金交易日历 获取交易日列表…

Cartographer学习笔记

Cartographer 是一个跨多个平台和传感器配置提供 2D 和 3D 实时同步定位和地图绘制 (SLAM) 的系统。 1. 文件关系 2. 代码框架 common: 定义了基本数据结构和一些工具的使用接口。例如&#xff0c;四舍五入取整的函数、时间转化相关的一些函数、数值计算的函数、互斥锁工具等…

gcc源码分析 词法和语法分析

gcc源码分析 词法和语法分析 一、输入参数相关1、命令行到gcc二、词法与语法分析1、词法分析1.1 struct cpp_reader1.2 struct tokenrun/struct cpp_token/lookahead字段1.3 struct ht2.1 语法符号相关的结构体c_token定义如下:2.2在语法分析中实际上有多个API组成了其接口函数…

【Python】Selenium基础入门

Selenium基础入门 一、Selenium简介二、Selenium的安装三、Selenium的使用1.访问web网站2.元素定位根据标签 id 获取元素根据标签 name 属性的值获取元素根据 Xpath 语句获取元素根据标签名获取元素根据CSS选择器获取元素根据标签的文本获取元素&#xff08;精确定位&#xff0…

JVM学习-监控工具(一)

使用数据说明问题&#xff0c;使用知识分析问题&#xff0c;使用工具处理问题 无监控&#xff0c;不调优&#xff01; 命令行工具 在JDK安装目录下&#xff0c;可以查看到相应的命令行工具&#xff0c;如下图 jps(Java Process Status) 显示指定系统内所有的Hotpot虚拟机…

【算法刷题 | 动态规划08】6.9(单词拆分、打家劫舍、打家劫舍||)

文章目录 21.单词拆分21.1题目21.2解法&#xff1a;动规21.2.1动规思路21.2.2代码实现 22.打家劫舍22.1题目22.2解法&#xff1a;动规22.2.1动规思路22.2.2代码实现 23.打家劫舍||23.1题目23.2解法&#xff1a;动规23.2.1动规思路23.2.2代码实现 21.单词拆分 21.1题目 给你一…

如何获取当前dll或exe模块所在路径?

有时我们需要在当前运行的dll或exe模块中去动态加载当前模块同路径中的另一个库&#xff0c;或者启动当前模块同路径中的另一个exe程序&#xff0c;一般需要获取当前模块的路径&#xff0c;然后去构造同路径下目标模块的绝对路径&#xff0c;然后通过该绝对路径去加载或启动该目…

SpringBoot集成缓存功能

1. 缓存规范 Java Caching定义了五个核心接口&#xff0c;分别是&#xff1a;CachingProvider、CacheManager、Cache、Entry和Expiry。 CachingProvider&#xff1a;定义了创建、配置、获取、管理和控制多个CacheManager。一个应用可以在运行期访问多个CachingProvider。CacheM…

URL的编码解码(一),仅针对ASCII码字符

用十六进制对特定字符编码&#xff0c;利用百分号标识搜索字符串解码十六进制字符。 (笔记模板由python脚本于2024年06月09日 18:05:25创建&#xff0c;本篇笔记适合喜好探寻URL的coder翻阅) 【学习的细节是欢悦的历程】 Python 官网&#xff1a;https://www.python.org/ Free…

基于深度学习的中文语音识别模型(支持wav、mp4、m4a等所有格式音频上传)【已开源】

基于深度学习的中文语音识别模型&#xff08;支持wav、mp4、m4a等所有格式音频上传&#xff09; 前言 该开源项目旨在提供一个能够自动检测并识别中文语音的模型&#xff0c;支持wav、mp4、m4a等格式的音频文件上传。无论是从录音设备中获取的wav文件&#xff0c;还是从视频中…

Kingshard:MySQL代理,释放数据库潜能

Kingshard&#xff1a; 简化数据库管理&#xff0c;提升性能极限。- 精选真开源&#xff0c;释放新价值。 概览 kingshard是一个由Go开发的高性能MySQL Proxy项目&#xff0c;专为简化数据库管理和提升查询性能而设计。kingshard在满足基本的读写分离的功能上&#xff0c;致力…

Llama模型家族之Stanford NLP ReFT源代码探索 (四)Pyvene论文学习

LlaMA 3 系列博客 基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;一&#xff09; 基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;二&#xff09; 基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;三&#xff09; 基于 LlaMA…

【react】react项目支持鼠标拖拽的边框改变元素宽度的组件

目录 安装使用方法示例Props 属性方法示例代码调整兄弟div的宽度 re-resizable github地址 安装 $ npm install --save re-resizable这将安装re-resizable库并将其保存为项目的依赖项。 使用方法 re-resizable 提供了一个 <Resizable> 组件&#xff0c;它可以包裹任何…

[hddm]python模块hddm安装后测试代码

测试环境&#xff1a; hddm0.8.0 测试文件test.csv subj_idx,stim,rt,response,theta,dbs,conf 0,LL,1.21,1.0,0.65627512226100004,1,HC 0,WL,1.6299999999999999,1.0,-0.32788867166199998,1,LC 0,WW,1.03,1.0,-0.480284512399,1,HC 0,WL,2.77,1.0,1.9274273452399999,1,L…

使用 Scapy 库编写 TCP 劫持攻击脚本

一、介绍 TCP劫持攻击&#xff08;TCP Hijacking&#xff09;&#xff0c;也称为会话劫持&#xff0c;是一种攻击方式&#xff0c;攻击者在合法用户与服务器之间的通信过程中插入或劫持数据包&#xff0c;从而控制通信会话。通过TCP劫持&#xff0c;攻击者可以获取敏感信息、执…

网络基础-IP协议

文章目录 前言一、IP报文二、IP报文分片重组IP分片IP分片示例MTUping 命令可以验证MTU大小Windows系统&#xff1a;Linux系统: 前言 基础不牢&#xff0c;地动山摇&#xff0c;本节我们详细介绍IP协议的内容。 一、IP报文 第一行&#xff1a; 4位版本号指定IP协议的版本&#…

C语言详解(联合和枚举)

Hi~&#xff01;这里是奋斗的小羊&#xff0c;很荣幸您能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎 ~~ &#x1f4a5;个人主页&#xff1a;奋斗的小羊 &#x1f4a5;所属专栏&#xff1a;C语言 &#x1f680;本系列文章为个人学习笔记&#xff0c;在这里撰写…

UltraEditUEStudio软件最新版下载及详细安装教程

UEStudio简介&#xff1a; UEStudio建立在上文本编辑器UltraEdit的功能基础上&#xff0c;并为团队和开发人员提供了其他功能&#xff0c;例如深度Git集成。您可以直接在UEStudio中克隆&#xff0c;签出&#xff0c;更新&#xff0c;提交&#xff0c;推入/拉入等操作&#xff…