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.pswp.cn/web/22878.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/22878.shtml
英文地址,請注明出處:http://en.pswp.cn/web/22878.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

【Linux】內存級文件

目錄 C語言關于文件操作的函數 Linux關于文件操作的系統調用 完善myshell C語言緩沖區 其實我們在C語言就學過文件操作&#xff0c;但是從語言的角度&#xff0c;我們只是說會用了關于文件的一些操作和函數&#xff0c;但其實它究竟是怎么回事我們其實并不明白&#xff0c;…

大模型日報2024-06-05

大模型日報 2024-06-05 大模型資訊 AI氣象預測取得重大進展&#xff1a;單臺桌面電腦即可運行全球天氣模型 摘要: 一項新的人工智能天氣預測模型已經取得重大進展&#xff0c;該模型能夠在一臺普通的桌面電腦上運行&#xff0c;預測全球天氣。這意味著即使沒有復雜的物理計算&a…

2024-5-19——找出數組游戲的贏家

2024-5-19 題目來源我的題解方法一 純模擬方法二 一次遍歷 題目來源 力扣每日一題&#xff1b;題序&#xff1a;1535 我的題解 方法一 純模擬 排除一種情況&#xff1a;當k>n-1時&#xff0c;至少會遍歷數組一遍&#xff0c;實質就是求數組的最大值。 其余的情況使用List…

對象格式的數據表單循環校驗

首先我們的代碼數據是這樣的&#xff08;直接和后臺對應&#xff09; ruleForm: { roadList: {vehicle: {name:"機動車",width: 0,length:0,area:0},notVehicle: {name:"非機動車",width: 0,length:0,area:0},walk: {name:"人行道",width: 0,len…

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);//…

fun()const->Iterator

先看一個函數定義如下&#xff1a; template <typename T> auto Blocker<T>::ObservedEnd() const -> Iterator {return observed_msg_queue_.end(); } 1 迭代器&#xff1a;Iterator 2 C auto 返回類型推導&#xff1a;-> Iterator 3 函數體限定不能修改…

【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; 數據介紹 每年的《中國…

LeetCode.55 跳躍游戲

LeetCode.55 跳躍游戲 題目描述解題思路錯誤的解題思路解題思路 代碼 題目描述 解題思路 錯誤的解題思路 我一開始的思路是累加可跳范圍內的最大值sum&#xff0c;如果最終sum > nums.size()那么就返回true&#xff0c;這種思路是錯誤的&#xff0c;因為在你選擇最大值的…

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 個合法編碼的…