阿城区建设小学网站云南住房和城乡建设厅网站首页

阿城区建设小学网站,云南住房和城乡建设厅网站首页,seo谷歌,包装纸箱怎么做网站前端新人必看#xff1a;HTML5表格也能做圆角#xff1f;实战技巧全解析前端新人必看#xff1a;HTML5表格也能做圆角#xff1f;实战技巧全解析为什么 table 天生“不圆”先给 table 做个“CT”——渲染原理 3 分钟速读方案一#xff1a;separate border-radius——最省…前端新人必看HTML5表格也能做圆角实战技巧全解析前端新人必看HTML5表格也能做圆角实战技巧全解析为什么 table 天生“不圆”先给 table 做个“CT”——渲染原理 3 分钟速读方案一separate border-radius——最省心但最常被嫌弃方案二外套 div 障眼法——设计师最爱的一招方案三thead、tbody 各自圆——“拼积木”式精细控制方案四伪元素“画皮”——极致合并线 圆角全都要方案五UI 框架里“偷梁换柱”——以 Element Plus 为例方案六数据动态加载圆角不崩方案七响应式圆角——折叠屏、横竖屏无缝切换排查圆角失效的“五连鞭”让圆角更精致的三件套写在最后的碎碎念前端新人必看HTML5表格也能做圆角实战技巧全解析“表格就该方方正正”——这句话在 2025 年听起来就像“网页必须用 IE6 打开”一样古早。后台管理系统、数据看板、甚至移动端报表圆角卡片化早已是设计师的基操。可一到table身上很多前端就秒变“手残”border-radius 写了但浏览器就是不给面子套了 div 又被 overflow 砍掉半拉UI 框架样式层层叠加!important 都救不回来。别慌今天咱们把 table 圆角当成“密室逃脱”来玩先摸清浏览器给 table 埋了哪些暗门再手把手拆机关最后奉上可直接粘贴进项目的七套完整代码。看完还不圆你来打我。为什么 table 天生“不圆”故事要从 1997 年说起。那年 HTML4 发布table 带着border1的祖传胎记出道浏览器为了把格子画整齐默认把border-collapse: collapse写进 UA 样式。——“边框合并”听起来省材料却直接把 border-radius 的幻想按在地上摩擦。collapse 模式下浏览器把相邻单元格的边框合并成一条“共享边”圆角被当成“边角料”直接削掉。于是江湖传言table 与圆角八字不合。可时代变了如今后台界面里动不动十行数据配一张毛玻璃背景圆角卡片既能柔化视觉又能和旁边的圆角按钮、圆角输入框组成“一家人”。需求活生生摆在那table 却还在耍 90 年代的老脾气怎么办盘它先给 table 做个“CT”——渲染原理 3 分钟速读动手之前先搞清楚浏览器怎么画表格省得后面改样式像盲拆炸弹。盒模型层级table → tbody* → tr → th/td(* 你没写 tbody浏览器也会自动补一个别问问就是规范。)边框合并collapse时border 被分成 7 类table、colgroup、col、thead、tbody、tfoot、tr、th/td优先级高的会把低的吞掉。border-radius 只能作用在“完整盒子”上collapse 模式下th/td 的四个角被相邻兄弟撕成碎片圆角自然失效。唯一还能保住圆角的是border-collapse: separate但 separate 又会引入“边框间距”——cellspacing 的既视感需要额外处理。记住上面四点后面无论走哪条路线都能瞬间定位“圆角消失”的元凶。方案一separate border-radius——最省心但最常被嫌弃思路一句话把 border-collapse 关回去回到 separate 模式让 table 自己长出一个完整的盒子再给它四个角磨圆。优点纯 CSS无额外节点兼容性 IE9。缺点相邻单元格边框之间会出现“缝隙”设计师如果追求 1px 合并线会当场暴走。代码直接端上来/* 1. 基础样式 */.rounded-table{border-collapse:separate;/* 关键第一步 */border-spacing:0;/* 去掉缝隙 */width:100%;border-radius:12px;/* 四个角磨圆 */overflow:hidden;/* 万一子元素溢出兜底 */box-shadow:0 2px 8pxrgba(0,0,0,.08);/* 卡片感 */}/* 2. 单元格边框 */.rounded-table th, .rounded-table td{border:1px solid #e8e8e8;padding:12px 16px;}/* 3. 去掉最外圈重复边框 */.rounded-table tr:first-child th{border-top:none;}.rounded-table tr:last-child td{border-bottom:none;}.rounded-table th:first-child, .rounded-table td:first-child{border-left:none;}.rounded-table th:last-child, .rounded-table td:last-child{border-right:none;}tableclassrounded-tabletheadtrth姓名/thth部门/thth绩效/th/tr/theadtbodytrtd曹阿瞒/tdtd市场部/tdtdS/td/trtrtd孙仲谋/tdtd运营部/tdtdA/td/tr/tbody/table效果圆角乖乖出现边框却像“乐高积木”一样分离。如果产品能接受“分离线”直接收工不能接受继续往下看。方案二外套 div 障眼法——设计师最爱的一招核心思想table 本身不圆我给它穿一件“圆风衣”——外层 div 负责 border-radius内层 table 该合并合并视觉上层级隔离互不打扰。优点border-collapse 可以继续 collapse设计师要的 1px 合并线稳如老狗。缺点多一层 DOM移动端极端场景下可能出现横向滚动条与圆角错位需要加“小修小补”。/* 外套 */.table-wrapper{border-radius:12px;overflow:hidden;/* 把直角吞掉 */box-shadow:0 2px 8pxrgba(0,0,0,.08);}/* 内层 table 放飞自我 */.table-wrapper table{width:100%;border-collapse:collapse;}.table-wrapper th, .table-wrapper td{border:1px solid #e8e8e8;padding:12px 16px;}divclasstable-wrappertabletheadtrth订单号/thth金额/thth状态/th/tr/theadtbodytrtd#20251222001/tdtd¥299/tdtd已发货/td/tr!-- 200 行数据也不怕 --/tbody/table/div注意点如果表格宽度超出屏幕wrapper 会被撑成“椭圆角”。给.table-wrapper加max-width: 100%; overflow-x: auto;可破。横向滚动时box-shadow 可能随滚动条左右移动看起来像“断翅”。把 shadow 换到更外层固定容器即可。方案三thead、tbody 各自圆——“拼积木”式精细控制后台里常见一个场景表头固定淡灰背景表体白色条纹二者还要分别带圆角。直接把 border-radius 扔给 table 是“一锅炖”很难让 thead 顶部圆、tbody 底部圆。此时可以拆成“两段式”给 thead 单独包一层 div负责顶部圆角tbody 用 after 伪元素画底部圆角遮罩中间用 collapse 合并边框视觉依旧清爽。/* 顶部圆角盒子 */.thead-wrapper{border-radius:12px 12px 0 0;overflow:hidden;}/* 底部圆角用伪元素模拟 */.tbody-wrapper{position:relative;border-collapse:collapse;}.tbody-wrapper::after{content:;position:absolute;left:0;right:0;bottom:0;height:12px;background:#fff;border-radius:0 0 12px 12px;pointer-events:none;}divclassthead-wrappertableclasstop-tabletheadtrth排名/thth游戏/thth销量/th/tr/thead/table/divdivclasstbody-wrappertableclassbottom-tabletbodytrtd1/tdtd艾尔登法环/tdtd2100w/td/trtrtd2/tdtd塞尔达/tdtd2800w/td/tr/tbody/table/div小技巧两段 table 的列宽容易对不齐给 th/td 统一设置width: 25%; width: 50%;之类百分比或者直接用table-layout: fixed;一把梭。方案四伪元素“画皮”——极致合并线 圆角全都要如果产品既要 collapse 的 1px 合并线又要四周圆角还拒绝额外 div“DOM 洁癖”那就只能上“画皮”用伪元素按 table 的四条边手工描一个带圆角的边框真正的 table 边框设为透明。听起来很极客实际上代码量并不大而且兼容性一路杀到 IE10。.four-edge{position:relative;border-collapse:collapse;/* 把真实边框变透明 */border:1px solid transparent;}/* 画皮 */.four-edge::before{content:;position:absolute;inset:0;/* top right bottom left 全 0 */border:1px solid #e8e8e8;border-radius:12px;pointer-events:none;/* 别让遮罩挡住鼠标 */z-index:1;}/* 让内容区比遮罩高一层点击事件正常 */.four-edge td, .four-edge th{position:relative;z-index:2;padding:12px 16px;}tableclassfour-edgetheadtrth股票/thth涨跌/thth幅%/th/tr/theadtbodytrtdkitten.ai/tdtd8%/tdtd涨停/td/tr/tbody/table注意伪元素边框与 table 网格之间可能出现 1px 间隙把inset: -1px就能完美覆盖。方案五UI 框架里“偷梁换柱”——以 Element Plus 为例现实中 90% 的表格并非裸写而是站在巨人肩膀上Element Plus、Ant Design、Naive UI……这些框架自带严谨的样式层随意写个.el-table { border-radius: 8px; }往往被原子的.el-table, .el-table__body, .el-table__header按在地上摩擦。正确姿势是“利用 CSS 变量 深度选择器”双管齐下/* 全局变量方便主题切换 */:root{--table-radius:12px;}/* 深度选择器Vue3 项目用 :deep() */:deep(.el-table){border-radius:var(--table-radius);overflow:hidden;}/* 表头圆角 */:deep(.el-table__header-wrapper){border-radius:var(--table-radius)var(--table-radius)0 0;overflow:hidden;}/* 表体圆角 */:deep(.el-table__body-wrapper){border-radius:0 0var(--table-radius)var(--table-radius);overflow:hidden;}template el-table :datalist stripe stylewidth: 100% el-table-column propname label姓名/ el-table-column propage label年龄/ /el-table /template要点别直接改框架源文件维护升级会哭用变量覆盖主题切换无痛。如果项目用了v-loading锁屏遮罩也会继承圆角记得给.el-loading-mask再补一次border-radius防止“白边”。方案六数据动态加载圆角不崩表格常常伴随“点下一页加载 50 条”或骨架屏圆角在加载瞬间被撑成直角的尴尬相信不少人都踩过。解法其实很简单给表格容器固定高度加载时内部用min-height: 200px;撑住骨架屏本身也加同样的border-radius用户视觉无感切换数据返回后把骨架屏卸掉新 table 直接复用容器圆角稳如磐石。.ske-wrapper, .real-table{border-radius:12px;overflow:hidden;transition:opacity .3s;}.ske-wrapper{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);}// 伪代码Vue3constloadingref(true)fetchData().finally(()loading.valuefalse)divv-ifloadingclassske-wrapperstyleheight:400px;/divel-tablev-else:datalistclassreal-table/方案七响应式圆角——折叠屏、横竖屏无缝切换移动端屏幕宽度乱跳圆角如果写死12px在折叠屏展开瞬间会像“指甲盖”一样迷你。用 CSS 变量 clamp 函数让圆角随屏幕呼吸.dynamic-radius{--radius:clamp(8px,2vw,16px);border-radius:var(--radius);overflow:hidden;}2vw会随视口放大缩小最小不低于 8px最大不超过 16px无论手机横屏还是 Pad 竖屏圆角都恰到好处。排查圆角失效的“五连鞭”写完代码一刷新圆角又没了按下面顺序打一套“五连鞭”九成问题当场去世看 border-collapsedevtools 里把 table 选中确认border-collapse: collapse是否覆盖了 separate看 overflow父级如果写了overflow: visible以外的值会把圆角吃成“平头”看背景溢出td 背景色如果设成纯色可能会盖住圆角把背景挪到 table 或 wrapper看 z-index伪元素方案里内容层 z-index 比遮罩低圆角被盖住看框架样式Element 的.el-table--border优先级高达 250你的border-radius被按在地上打开 devtools 逐条取消勾选找到凶手后加:deep()提升权重。让圆角更精致的三件套微阴影box-shadow: 0 2px 6px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.02);轻轻一层表格瞬间从“Excel”变成“Notion”。hover 高亮tbody tr{transition:background .25s;}tbody tr:hover{background:#fafafa;}别忘了把圆角同步给 tr否则 hover 背景会把直角露出来tbody tr:first-child td:first-child{border-top-left-radius:8px;}tbody tr:first-child td:last-child{border-top-right-radius:8px;}/* 同理 bottom */CSS 变量统一收口:root{--r:12px;--c:#e8e8e8;}.table-wrapper{border-radius:var(--r);}.table-wrapper td{border-color:var(--c);}主题切换时只改一行变量圆角、颜色、阴影全站秒换肤。写在最后的碎碎念table 圆角之所以让新人头大归根结底是“历史遗产”与“现代审美”的冲突。浏览器规范早在 HTML5 就给了 separate 模式只是大家被 collapse 的“合并边框”惯坏了才误以为 table 与圆角水火不容。其实不管 separate、外套 div、伪元素画皮还是框架变量覆盖本质都是“把圆角还给盒子”。掌握原理后你可以像玩乐高一样把各种零件拼成想要的样子而不是被“table 不能圆”的都市传说吓退。下次设计师再把“四角圆润”甩过来别急着皱眉先把这篇文章甩进收藏夹复制粘贴七套方案再配上一句“圆多大8px 还是 16px我 3 分钟搞定。”——那一刻你不再是“切图仔”而是“圆角魔术师”。表格太方不存在的。欢迎来到我的博客很高兴能够在这里和您见面希望您在这里可以感受到一份轻松愉快的氛围不仅可以获得有趣的内容和知识也可以畅所欲言、分享您的想法和见解。推荐DTcode7的博客首页。一个做过前端开发的产品经理经历过睿智产品的折磨导致脱发之后励志要翻身农奴把歌唱一边打入敌人内部一边持续提升自己为我们广大开发同胞谋福祉坚决抵制睿智产品折磨我们码农兄弟专栏系列点击解锁学习路线(点击解锁知识定位《微信小程序相关博客》持续更新中~结合微信官方原生框架、uniapp等小程序框架记录请求、封装、tabbar、UI组件的学习记录和使用技巧等《AIGC相关博客》持续更新中~AIGC、AI生产力工具的介绍例如stable diffusion这种的AI绘画工具安装、使用、技巧等总结《HTML网站开发相关》《前端基础入门三大核心之html相关博客》前端基础入门三大核心之html板块的内容入坑前端或者辅助学习的必看知识《前端基础入门三大核心之JS相关博客》前端JS是JavaScript语言在网页开发中的应用负责实现交互效果和动态内容。它与HTML和CSS并称前端三剑客共同构建用户界面。通过操作DOM元素、响应事件、发起网络请求等JS使页面能够响应用户行为实现数据动态展示和页面流畅跳转是现代Web开发的核心《前端基础入门三大核心之CSS相关博客》介绍前端开发中遇到的CSS疑问和各种奇妙的CSS语法同时收集精美的CSS效果代码用来丰富你的web网页《canvas绘图相关博客》Canvas是HTML5中用于绘制图形的元素通过JavaScript及其提供的绘图API开发者可以在网页上绘制出各种复杂的图形、动画和图像效果。Canvas提供了高度的灵活性和控制力使得前端绘图技术更加丰富和多样化《Vue实战相关博客》持续更新中~详细总结了常用UI库elementUI的使用技巧以及Vue的学习之旅《python相关博客》持续更新中~Python简洁易学的编程语言强大到足以应对各种应用场景是编程新手的理想选择也是专业人士的得力工具《sql数据库相关博客》持续更新中~SQL数据库高效管理数据的利器学会SQL轻松驾驭结构化数据解锁数据分析与挖掘的无限可能《算法系列相关博客》持续更新中~算法与数据结构学习总结通过JS来编写处理复杂有趣的算法问题提升你的技术思维《IT信息技术相关博客》持续更新中~作为信息化人员所需要掌握的底层技术涉及软件开发、网络建设、系统维护等领域的知识《信息化人员基础技能知识相关博客》无论你是开发、产品、实施、经理只要是从事信息化相关行业的人员都应该掌握这些信息化的基础知识可以不精通但是一定要了解避免日常工作中贻笑大方《信息化技能面试宝典相关博客》涉及信息化相关工作基础知识和面试技巧提升自我能力与面试通过率扩展知识面《前端开发习惯与小技巧相关博客》持续更新中~罗列常用的开发工具使用技巧,如 Vscode快捷键操作、Git、CMD、游览器控制台等《photoshop相关博客》持续更新中~基础的PS学习记录含括PPI与DPI、物理像素dp、逻辑像素dip、矢量图和位图以及帧动画等的学习总结日常开发办公生产【实用工具】分享相关博客》持续更新中~分享介绍各种开发中、工作中、个人生产以及学习上的工具丰富阅历给大家提供处理事情的更多角度学习了解更多的便利工具如Fiddler抓包、办公快捷键、虚拟机VMware等工具吾辈才疏学浅摹写之作恐有瑕疵。望诸君海涵赐教。望轻喷嘤嘤嘤非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。愿斯文对汝有所裨益纵其简陋未及渊博亦足以略尽绵薄之力。倘若尚存阙漏敬请不吝斧正俾便精进