自定義table

更好
在這里插入圖片描述
在這里插入圖片描述

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><title>數據表格</title><style>* {margin: 0;padding: 0;box-sizing: border-box;font-size: 14px;}html,body {width: 100%;height: 100%;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;}/* 表格容器 */.table-container {width: 100%;height: 100%;padding: 20px;display: flex;flex-direction: column;}/* 表格包裝，實現水平滾動 */.table-wrapper {flex: 1;overflow-x: auto;position: relative;border: 1px solid #ebeef5;border-radius: 4px;}/* 表格主體樣式 */.data-table {width: 100%;border-collapse: collapse;min-width: 800px;}/* 表頭固定樣式 */.data-table thead {position: sticky;top: 0;z-index: 10;}/* 表頭和單元格通用樣式 */.data-table th,.data-table td {padding: 8px 12px;line-height: 24px;text-align: left;border-bottom: 1px solid #ebeef5;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;background-color: #fff;}/* 表頭特定樣式 */.data-table th {font-weight: 600;color: #606266;background-color: #f5f7fa;}/* 單元格特定樣式 */.data-table td {color: #606266;}/* 特殊列寬設置 */.dict-col {width: 16%;}.action-col {width: 15%;min-width: 150px;}/* 按鈕樣式 */.data-table button {margin-right: 8px;padding: 6px 12px;border: 1px solid #dcdfe6;border-radius: 4px;background-color: #fff;color: #606266;cursor: pointer;transition: all 0.3s;}.data-table button:hover {color: #409eff;border-color: #c6e2ff;background-color: #ecf5ff;}/* 滾動條樣式 */.table-wrapper::-webkit-scrollbar {height: 8px;width: 8px;}.table-wrapper::-webkit-scrollbar-thumb {background-color: #c1c1c1;border-radius: 4px;}.table-wrapper::-webkit-scrollbar-track {background-color: #f1f1f1;}</style>
</head><body><div class="table-container"><div class="table-wrapper"><table class="data-table" role="grid" aria-label="字段配置表"><thead><tr><th scope="col">字段名稱</th><th scope="col">字段類型</th><th scope="col">是否查詢展示</th><th scope="col">是否列表展示</th><th scope="col">是否表單展示</th><th scope="col">是否必填</th><th scope="col" class="dict-col">關聯字典</th><th scope="col" class="action-col">操作</th></tr></thead><tbody><tr><td>用戶名</td><td>字符串</td><td>是</td><td>是</td><td>是</td><td>是</td><td class="dict-col">無</td><td class="action-col"><button type="button" aria-label="編輯">編輯</button><button type="button" aria-label="刪除">刪除</button></td></tr><tr><td>密碼</td><td>密碼</td><td>否</td><td>否</td><td>是</td><td>是</td><td class="dict-col">無</td><td class="action-col"><button type="button" aria-label="編輯">編輯</button><button type="button" aria-label="刪除">刪除</button></td></tr><tr><td>性別</td><td>枚舉</td><td>是</td><td>是</td><td>是</td><td>否</td><td class="dict-col">性別字典</td><td class="action-col"><button type="button" aria-label="編輯">編輯</button><button type="button" aria-label="刪除">刪除</button></td></tr><tr><td>年齡</td><td>數字</td><td>是</td><td>是</td><td>是</td><td>否</td><td class="dict-col">無</td><td class="action-col"><button type="button" aria-label="編輯">編輯</button><button type="button" aria-label="刪除">刪除</button></td></tr><tr><td>郵箱</td><td>字符串</td><td>是</td><td>是</td><td>是</td><td>否</td><td class="dict-col">無</td><td class="action-col"><button type="button" aria-label="編輯">編輯</button><button type="button" aria-label="刪除">刪除</button></td></tr><tr><td>手機號</td><td>字符串</td><td>是</td><td>是</td><td>是</td><td>否</td><td class="dict-col">無</td><td class="action-col"><button type="button" aria-label="編輯">編輯</button><button type="button" aria-label="刪除">刪除</button></td></tr></tbody></table></div></div>
</body></html>

沒有上面的好

<!DOCTYPE html>
<html><head><meta charset="utf-8">
</head><body><div class="table-wrap scrollbar"><div class="table"><div class="table-header"><span class="col">字段名稱</span><span class="col">字段類型</span><span class="col">是否查詢展示</span><span class="col">是否列表展示</span><span class="col">是否表單展示</span><span class="col">是否必填</span><span class="col col-7">關聯字典</span><span class="col col-8">操作</span></div><div class="table-body scrollbar"><div class="row"><span class="col">1</span><span class="col">2</span><span class="col">3</span><span class="col">4</span><span class="col">5</span><span class="col">6</span><span class="col col-7">7</span><span class="col col-8"><button>編輯</button><button>刪除</button></span></div><div class="row"><span class="col">1</span><span class="col">2</span><span class="col">3</span><span class="col">4</span><span class="col">5</span><span class="col">6</span><span class="col col-7">7</span><span class="col col-8"><button>編輯</button><button>刪除</button></span></div><div class="row"><span class="col">1</span><span class="col">2</span><span class="col">3</span><span class="col">4</span><span class="col">5</span><span class="col">6</span><span class="col col-7">7</span><span class="col col-8"><button>編輯</button><button>刪除</button></span></div><div class="row"><span class="col">1</span><span class="col">2</span><span class="col">3</span><span class="col">4</span><span class="col">5</span><span class="col">6</span><span class="col col-7">7</span><span class="col col-8"><button>編輯</button><button>刪除</button></span></div><div class="row"><span class="col">1</span><span class="col">2</span><span class="col">3</span><span class="col">4</span><span class="col">5</span><span class="col">6</span><span class="col col-7">7</span><span class="col col-8"><button>編輯</button><button>刪除</button></span></div><div class="row"><span class="col">1</span><span class="col">2</span><span class="col">3</span><span class="col">4</span><span class="col">5</span><span class="col">6</span><span class="col col-7">7</span><span class="col col-8"><button>編輯</button><button>刪除</button></span></div></div></div></div>
</body></html><style>* {margin: 0;padding: 0;box-sizing: border-box;}html,body {width: 100%;height: 100%;}.table-wrap {width: 100%;height: 100%;overflow-x: auto;padding: 20px;}.table {width: max-content;min-width: 100%;height: 100%;}.table-header {width: 100%;height: 40px;display: flex;align-items: center;font-weight: 600;color: rgb(144, 147, 153);}.table-body {width: 100%;height: calc(100% - 40px);overflow-y: auto;overflow-x: hidden;color: rgb(96, 98, 102);}.row {width: 100%;height: 40px;display: flex;align-items: center;}.col {flex-shrink: 0;width: 12%;min-width: 125px;height: 100%;padding: 8px 12px;line-height: 24px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;border-bottom: 1px solid #ebeef5;}.col-7 {width: 16%;}
</style>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/bicheng/93738.shtml
繁體地址，請注明出處：http://hk.pswp.cn/bicheng/93738.shtml
英文地址，請注明出處：http://en.pswp.cn/bicheng/93738.shtml

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

相關文章

面向R語言用戶的Highcharts

面向R語言用戶的Highcharts

如果您喜歡使用 R 進行數據科學創建交互式數據可視化&#xff0c;那么請你收藏。今天&#xff0c;我們將使用折線圖、柱狀圖和散點圖來可視化資產回報。對于我們的數據&#xff0c;我們將使用以下 5 只 ETF 的 5 年月回報率。 SPY (S&P500 fund)EFA (a non-US equities fun…
閱讀更多...
【測試工具】OnDo SIP Server--輕松搭建一個語音通話服務器

【測試工具】OnDo SIP Server--輕松搭建一個語音通話服務器

前言 Ondo SIP Server 是一款基于 SIP(Session Initiation Protocol)協議的服務器軟件&#xff0c;主要用于實現 VoIP(Voice over IP)通信&#xff0c;支持語音通話、視頻會議等多媒體會話管理&#xff0c;非常適合學習和測試VoIP的基本功能。本文介紹Ondo SIP Server的安裝、…
閱讀更多...
瘋狂星期四文案網第42天運營日記

瘋狂星期四文案網第42天運營日記

網站運營第42天&#xff0c;點擊觀站&#xff1a; 瘋狂星期四 crazy-thursday.com 全網最全的瘋狂星期四文案網站 運營報告 今日訪問量 今日搜索引擎收錄情況 網站優化點 優化一些發現的seo錯誤 增加顏文字欄目 增加了一些tag
閱讀更多...
使用空模型實例調用輔助函數，確定在量化過程中哪些層會被跳過（43）

使用空模型實例調用輔助函數，確定在量化過程中哪些層會被跳過（43）

在Facebook的OPT-350M中，模型的頭部（lm_head）與解碼器的嵌入標記層（decoder.embed_tokens）共享其權重。 print(model.model.decoder.embed_tokens) print(model.lm_head)輸出結果 Embedding(50272, 512
閱讀更多...
從0-1使用Fastmcp開發一個MCP服務，并部署到阿里云百煉 -持續更新中

從0-1使用Fastmcp開發一個MCP服務，并部署到阿里云百煉 -持續更新中

目的&#xff1a; 在本地使用fastmcp開發一個mcp,然后注冊到阿里云的百煉里面。實現在百煉里面創建智能體的時候直接引用自己開發的MCP 已完成&#xff1a;本地環境安裝 待完成&#xff1a; 1.根據需求實現一個MCP中可以調用某應用的多個API即 mcp.tool()、mcp.prompt()、接入大…
閱讀更多...
設計模式之匯總

設計模式之匯總

設計模式 零、設計原則 0.1 單一職責 0.2 接口隔離 0.3 開閉原則 0.4 依賴倒置0.5 迪米特法則&#xff0c;最小知道原則用戶關機 只和朋友通信 朋友條件&#xff1a; 1&#xff09;當前對象本身&#xff08;this&#xff09; 2&#xff09;以參量形式傳入到當前對象方法中的對象…
閱讀更多...
第6章 Decoder與Encoder核心組件

第6章 Decoder與Encoder核心組件

前言 Netty從底層Java通道讀取ByteBuf二進制數據&#xff0c;傳入Netty通道的流水線&#xff0c;隨后開始入站處理。在入站處理過程中&#xff0c;需要將ByteBuf二進制類型解碼成Java POJO對象。這個解碼過程可以通過Netty的Decoder&#xff08;解碼器&#xff09;去完成。 在…
閱讀更多...
[已解決]當啟動 Spring Boot 應用時出現 Using generated security password xxx提示

[已解決]當啟動 Spring Boot 應用時出現 Using generated security password xxx提示

當啟動 Spring Boot 應用時出現 Using generated security password xxx提示當啟動 Spring Boot 應用時出現 Using generated security password xxx提示&#xff0c;這是 Spring Security 自動配置的默認行為&#xff0c;通常發生在你??未自定義安全配置??但引入了 Spring…
閱讀更多...
自動分析需求，PRD 生成只需 SOLO 一步！

自動分析需求，PRD 生成只需 SOLO 一步！

資料來源&#xff1a;火山引擎-開發者社區 寫不清需求&#xff1f;PRD 難產&#xff1f;開發總跑偏&#xff1f;這些痛點&#xff0c;SOLO 來解決。 TRAE SOLO 是行業首個 Context Engineer。它不止協助編碼&#xff0c;更能基于精準上下文理解和工具調用&#xff0c;從構思、…
閱讀更多...
物聯網軟件開發過程中，數據流圖（DFD），用例圖，類圖，活動圖，序列圖，狀態圖，實體關系圖（ERD），BPMN（業務流程建模）詳解分析

物聯網軟件開發過程中，數據流圖（DFD），用例圖，類圖，活動圖，序列圖，狀態圖，實體關系圖（ERD），BPMN（業務流程建模）詳解分析

概述軟件開發過程中&#xff0c;特別是在物聯網&#xff08;IoT&#xff09;場景中&#xff0c;數據流圖&#xff08;DFD&#xff09;、UML圖&#xff08;包括用例圖、類圖、活動圖、序列圖、狀態圖&#xff09;、實體關系圖&#xff08;ERD&#xff09;和業務流程建模&#xf…
閱讀更多...
Mac（一）常用的快捷鍵整理

Mac（一）常用的快捷鍵整理

目錄1、系統操作與窗口管理2、應用與窗口切換3、常規編輯操作4、文本導航與光標控制??5、文本格式與文檔功能&#xff08;支持應用中&#xff09;6、截圖快捷鍵7、Safari 瀏覽器快捷鍵8、Finder 快捷鍵&#xff08;文件管理&#xff09;9、Fn / Globe 功能鍵&#xff08;部分…
閱讀更多...
HAProxy使用方法以及和LVS區別

HAProxy使用方法以及和LVS區別

HAProxy簡介HAProxy是法國開發者 威利塔羅(Willy Tarreau) 在2000年使用C語言開發的一個開源軟件 是一款具備高并發(萬級以上)、高性能的TCP和HTTP負載均衡器 支持基于cookie的持久性&#xff0c;自動故障切換&#xff0c;支持正則表達式及web狀態統計LVS 與 HAProxy 的核心區別…
閱讀更多...
超越“小作文”：大模型指令設計的進階之路——優化知識信噪比

超越“小作文”：大模型指令設計的進階之路——優化知識信噪比

文章摘要&#xff1a;你是否認為&#xff0c;給大模型的指令&#xff08;Prompt&#xff09;寫得越詳細越好&#xff1f;真的是信息越多&#xff0c;模型就越懂你嗎&#xff1f;本文將深入探討一個反直覺的觀點&#xff1a;初級的指令設計專注於資訊的堆砌&#xff0c;而高階的…
閱讀更多...
elasticsearch-集成prometheus監控(k8s)

elasticsearch-集成prometheus監控(k8s)

一. 簡介&#xff1a; 關于elasticsearch的簡介和部署&#xff0c;可以參考單獨的文章elasticsearch基礎概念與集群部署-CSDN博客&#xff0c;這里就不細說了。這里只講講如何在k8s中部署export并基于prometheus做es的指標采集。 二. 實現方式&#xff1a; 首先我們需要先部署…
閱讀更多...
貪心算法（Greedy Algorithm）詳解

貪心算法（Greedy Algorithm）詳解

一、什么是貪心算法&#xff1f; 貪心算法是一種算法設計范式&#xff0c;指在解決問題時&#xff0c;依賴于每次選擇最優的局部解&#xff0c;以期最終得到全局最優解。貪心算法的關鍵特點是&#xff1a; 局部最優選擇&#xff1a;每個階段選擇當前看起來最好的選擇&#xff0…
閱讀更多...
電梯的構造|保養|維修視頻全集_電梯安全與故障救援（課程下載）

電梯的構造|保養|維修視頻全集_電梯安全與故障救援（課程下載）

課程下載&#xff1a;https://download.csdn.net/download/m0_66047725/91699586 電梯原理與維修視頻教程 相關簡介: 電梯現在運用的非常廣泛,比如大型商場,建筑工地,特別是現在建造的很多高樓、商品房,基本都是安裝了電梯。電梯維保不力是導致電梯運行中安全事故頻發的主要原…
閱讀更多...
Traefik網關DNS解析超時問題優化

Traefik網關DNS解析超時問題優化

1、背景 在生產環境使用 Traefik 網關時出現了偶發的 DNS 解析超時導致網關與后端服務建立連接異常的情況。通過調用鏈埋點數據觀察發現&#xff0c;該部署環境中 Traefik 的 DNS 解析性能較差&#xff0c;耗時通常在 4ms 以上&#xff08;正常應該是 1ms 以內&#xff09; 初…
閱讀更多...
從0到1掌握 Spring Security（第三篇）：三種認證方式，按配置一鍵切換

從0到1掌握 Spring Security（第三篇）：三種認證方式，按配置一鍵切換

> 本文是Spring Security系列第三篇，將帶你實現內存、JDBC和自定義三種認證方式的無縫切換，只需修改配置文件即可完成認證策略變更！ ## 一、為什么需要多種認證方式？ 在軟件開發的不同階段，我們需要不同的認證策略： - **開發階段**：使用內存認證，快速配置測試賬號…
閱讀更多...
阿里云國際站云防火墻：如何利用阿里云云防火墻實現細粒度的訪問控制？

阿里云國際站云防火墻：如何利用阿里云云防火墻實現細粒度的訪問控制？

利用阿里云云防火墻實現細粒度的訪問控制&#xff0c;可以從分層策略、精確匹配、動態調整三個方面著手&#xff0c;讓不同業務、用戶和資源的訪問權限清晰可控。一、明確控制目標業務隔離&#xff1a;不同業務系統、部門或環境&#xff08;生產/測試&#xff09;之間互不干擾。…
閱讀更多...
rom定制系列------小米cc9機型 原生安卓15系統 雙版線刷root 定制修改功能項

rom定制系列------小米cc9機型 原生安卓15系統 雙版線刷root 定制修改功能項

小米 9 Lite/CC9 機型代碼;pyxis.搭載驍龍710處理器.適用于以下型號的小米機型&#xff1a;M1904F3BG, M1904F3BC. 刷寫前提; 需要當前機型已經解鎖bl的狀態下進入fast模式刷寫。此機型可以正常官方解鎖與強解bl鎖。效果都是一樣的。在fast模式下裝好聯機驅動。使用官方平臺刷…
閱讀更多...
最新文章

Copyright @ 2022~2023