热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

提升表格视觉效果:原生Table的CSS美化实例与技巧分享

本文分享了如何通过CSS提升原生表格的视觉效果,提供了多个实用的样式示例,帮助开发者打造美观、易读的表格布局。内容涵盖了边框、背景色、文字对齐等多方面的美化技巧,适合前端开发人员参考和应用。


















序号 名称 性别 列表


















1

测试

测试

测试



// css展示界面table
.ui-table-body{
height: calc(100% - 38px);
overflow: auto
}
.ui-table-head{
width: calc(100% - 6px)
}
.ui-table{
width: 100%;
table-layout : fixed; //可以控制th,td的宽度,使百分比生效
}
th{
text-align: left;
position: -webkit-sticky;
position: sticky;
}
th,td{
height: 26px;
padding: 6px 4px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

 


推荐阅读
author-avatar
非策不劃小子白
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有