td相对定位不显示边框,使用background-clip解决

本文探讨了在CSS中设置TD元素为相对定位时导致边框不显示的问题,并提出了解决方案——通过设置background-clip属性来确保边框正常显示。

问题是这样的,由于显示需要,设置td为相对定位,却神奇的发现不显示边框了:

td {
    position: relative;
    border: 1px solid #000;
}

这个时候你会发现这个边框死活就是不出来,不知道各位攻城狮有没有遇到类似的问题,解决方式的话就是使用background-clip啦,background-clip 属性规定背景的绘制区域,如下:
background-clip: border-box   /背景被裁剪到边框盒/
background-clip: padding-box  /背景被裁剪到内边距框/
background-clip: content-box  /背景被裁剪到内容框/
background-clip: inherit     /是否集成父元素属性/

所以只有给td设置下就可以了:

td {
    position: relative;
    border: 1px solid #000;
    background-clip: border-box;
}
<template> <div class="accordion-container"> <table class="accordion-table"> <!-- 表头 --> <thead> <tr> <th class="text w-55" fixed>序号</th> <th class="text w-100">变更时间</th> <th class="text max-w-150">变更单</th> <th class="text w-250">111</th> <th class="text w-55">实施人</th> <th class="text w-90">子系统名称</th> <th class="text w-105">计划时间与实际时间偏差</th> <th class="text w-105">计划时长与实际时长偏差</th> <th class="w-100">状态</th> <th class="text w-55" fixed="right">操作</th> </tr> </thead> <!-- 表主体 --> <tbody v-for="i in 3" style="height: 38px;overflow: hidden;"> <tr> <td colspan="10"> <div class="tbodyTitle"><span>应用变更</span></div> </td> </tr> <tr v-for="item in 10"> <td class="text" fixed>1</td> <td class="text">09-21:09:00</td> <td class="text">09-21:09:0009-21:09:0009-21:09:0009-21:09:0009-21:09:00</td> <td class="text"></td> <td class="text">张某某</td> <td class="text">111</td> <td class="text">13分钟</td> <td class="text">13分钟</td> <td class="text">待实施</td> <td class="text" fixed="right">验证</td> </tr> </tbody> </table> </div> </template> <script> export default { } </script> <style lang="less" scoped> .accordion-container { width: 100%; overflow-x: auto; white-space: nowrap; position: relative; } /* ==== 滚动条样式(WebKit 内核:Chrome / Edge / Safari)==== */ .accordion-container::-webkit-scrollbar { height: 4px; /* 横向滚动条高度 */ } .accordion-container::-webkit-scrollbar-track { background: transparent; border-radius: 0px; } .accordion-container::-webkit-scrollbar-thumb { background: #c0c0c0; border-radius: 0px; } .accordion-container::-webkit-scrollbar-thumb:hover { background: #a0a0a0; } .accordion-table { border-collapse: collapse; /* 关键:合并边框,去除单元格间隙 */ border-spacing: 0; /* 兼容性兜底 */ thead {} tbody {} tbody tr { background-color: #001b32; } tr { height: 38px; } th { height: 100%; padding: 0 8px; background-color: rgba(23, 100, 187, 0.15); } td { padding: 0 8px; height: 100%; } th.text,td.text { color: #9caabf; font-family: 'Alibaba_PuHuiTi_55'; font-size: 14px; font-weight: 400; line-height: normal; font-style: normal; } /* 固定第一列 */ td[fixed], th[fixed]{ position: sticky; left: -0.5px; background-color: #071C33; /* 背景色防止滚动时透明 */ z-index: 10; /* 确保覆盖其他单元格 */ } td[fixed='right'],th[fixed='right'] { position: sticky; right: -0.5px; background-color: #071C33; /* 背景色防止滚动时透明 */ z-index: 10; /* 确保覆盖其他单元格 */ } .w-55 { width: 55px } .w-90 { width: 90px } .w-100 { width: 100px } .w-105 { width: 205px } .w-250 { width: 250px } .max-w-150 { width: 250px } .noPading { padding: 0; } .tbodyTitle { width: 874px; height: 38px; box-sizing: border-box; border-bottom: 1px solid rgba(0, 66, 110, 0); background: linear-gradient(90deg, rgba(0, 44, 81, 0) 0%, #002c51 50%, rgba(0, 44, 81, 0) 100%); cursor: pointer; position: relative; span { position: sticky; left: 397px; top: 46px; color: #fff; font-family: 'HYRunYuan'; font-size: 20px; line-height: 24px; background: linear-gradient(0deg, #6fcfff 32.77%, #fff 79.52%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } } } </style> 以上使用 grid布局来实现
最新发布
09-23
<template> <div class="accordion-container"> <table class="accordion-table"> <!-- 表头 --> <thead> <tr> <th class="text w-55" fixed>序号</th> <th class="text w-100">变更时间</th> <th class="text max-w-150">变更单</th> <th class="text w-250">111</th> <th class="text w-55">实施人</th> <th class="text w-90">子系统名称</th> <th class="text w-105">计划时间与实际时间偏差</th> <th class="text w-105">计划时长与实际时长偏差</th> <th class="w-100">状态</th> <th class="text w-55" fixed="right">操作</th> </tr> </thead> <!-- 表主体 --> <tbody v-for="i in 3" style="height: 38px;overflow: hidden;"> <tr> <td colspan="10"> <div class="tbodyTitle"><span>应用变更</span></div> </td> </tr> <tr v-for="item in 10"> <td class="text" fixed>1</td> <td class="text">09-21:09:00</td> <td class="text">09-21:09:0009-21:09:0009-21:09:0009-21:09:0009-21:09:00</td> <td class="text"></td> <td class="text">张某某</td> <td class="text">111</td> <td class="text">13分钟</td> <td class="text">13分钟</td> <td class="text">待实施</td> <td class="text" fixed="right">验证</td> </tr> </tbody> </table> </div> </template> <script> export default { } </script> <style lang="less" scoped> .accordion-container { width: 100%; overflow-x: auto; white-space: nowrap; position: relative; } /* ==== 滚动条样式(WebKit 内核:Chrome / Edge / Safari)==== */ .accordion-container::-webkit-scrollbar { height: 4px; /* 横向滚动条高度 */ } .accordion-container::-webkit-scrollbar-track { background: transparent; border-radius: 0px; } .accordion-container::-webkit-scrollbar-thumb { background: #c0c0c0; border-radius: 0px; } .accordion-container::-webkit-scrollbar-thumb:hover { background: #a0a0a0; } .accordion-table { border-collapse: collapse; /* 关键:合并边框,去除单元格间隙 */ border-spacing: 0; /* 兼容性兜底 */ thead {} tbody {} tbody tr { background-color: #001b32; } tr { height: 38px; } th { height: 100%; padding: 0 8px; background-color: rgba(23, 100, 187, 0.15); } td { padding: 0 8px; height: 100%; } th.text,td.text { color: #9caabf; font-family: 'Alibaba_PuHuiTi_55'; font-size: 14px; font-weight: 400; line-height: normal; font-style: normal; } /* 固定第一列 */ td[fixed], th[fixed]{ position: sticky; left: -0.5px; background-color: #071C33; /* 背景色防止滚动时透明 */ z-index: 10; /* 确保覆盖其他单元格 */ } td[fixed='right'],th[fixed='right'] { position: sticky; right: -0.5px; background-color: #071C33; /* 背景色防止滚动时透明 */ z-index: 10; /* 确保覆盖其他单元格 */ } .w-55 { width: 55px } .w-90 { width: 90px } .w-100 { width: 100px } .w-105 { width: 205px } .w-250 { width: 250px } .max-w-150 { width: 250px } .noPading { padding: 0; } .tbodyTitle { width: 874px; height: 38px; box-sizing: border-box; border-bottom: 1px solid rgba(0, 66, 110, 0); background: linear-gradient(90deg, rgba(0, 44, 81, 0) 0%, #002c51 50%, rgba(0, 44, 81, 0) 100%); cursor: pointer; position: relative; span { position: sticky; left: 397px; top: 46px; color: #fff; font-family: 'HYRunYuan'; font-size: 20px; line-height: 24px; background: linear-gradient(0deg, #6fcfff 32.77%, #fff 79.52%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } } } </style> 如何将以上代码改为 div + css 表格布局
09-23
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %> <!DOCTYPE html> <html> <head> <title>员工信息查询</title> <style> body { font-family: 'Arial', sans-serif; background-color: #f4f8fb; color: #333; text-align: center; margin: 0; padding: 0; } h2 { margin-top: 20px; color: #4CAF50; animation: fadeIn 2s ease forwards; } table { margin: 20px auto; border-collapse: collapse; width: 80%; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); background-color: #ffffff; border-radius: 8px; } th, td { padding: 12px; border: 1px solid #ddd; text-align: center; } th { background-color: #4CAF50; color: white; } tr:hover { background-color: #e7f3fe; } .btn { margin-top: 20px; } a.button { display: inline-block; padding: 10px 20px; background-color: #4CAF50; color: white; text-decoration: none; border-radius: 5px; transition: background-color 0.3s ease; } a.button:hover { background-color: #45a049; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } </style> <script> // 页面加载时的淡入效果 window.onload = function() { document.body.style.opacity = 0; setTimeout(function() { document.body.style.transition = "opacity 1s ease"; document.body.style.opacity = 1; }, 100); }; </script> </head> <body> <h2>员工信息查询</h2> <table border="1"> <tr> <th>员工ID</th> <th>姓名</th> <th>性别</th> <th>职位</th> <th>联系方式</th> </tr> <tr> <td>${employee.id}</td> <td>${employee.name}</td> <td>${employee.gender}</td> <td>${employee.position}</td> <td>${employee.contact}</td> </tr> </table> <div class="btn"> <a href="${pageContext.request.contextPath}/employeemanagement" class="button">返回管理页面</a> </div> </body> </html>我想为这段代码的页面加载效果设计出别具风格的效果,在页面加载时整个表单将做波浪运动,表单的两段会先弯曲,然后表单的两段将以波浪的形式由慢到快向中间进行靠拢碰撞,在碰撞的瞬间整个表单压缩为一条彩色的竖状彩色直线,然后展开回复到表单原状
06-18
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值