原生table样式示例_table好看的css样式

原生table样式示例_table好看的css样式<div><divclass=”ui-table-head”><tableclass=”ui-table”><colgroup><colstyle=”width:10%”><colstyle=”width:55%”>.

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

<div>
            <div class="ui-table-head">
                <table class="ui-table">
                  <colgroup>
                    <col style="width:10%">
                    <col style="width:55%">
                    <col style="width:20%">
                    <col style="width:15%">
                  </colgroup>
                  <thead>
                    <tr>
                      <th>序号</th>
                      <th>名称</th>
                      <th>性别</th>
                      <th>列表</th>
                    </tr>
                  </thead>
                </table>
              </div>
              <div class="ui-table-body">
                <table class="ui-table">
                  <colgroup>
                    <col style="width:10%">
                    <col style="width:55%">
                    <col style="width:20%">
                    <col style="width:15%">
                  </colgroup>
                <tbody>
                  <tr>
                    <td>1
                    </td>
                    <td>
                     测试
                    </td>
                    <td>
                     测试
                    </td>
                    <td>
                      测试
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>

// 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;
}

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/193069.html原文链接:https://javaforall.net

(0)
上一篇 2025年12月2日 下午6:43
下一篇 2025年12月2日 下午7:15


相关推荐

  • haxm failed to open driver

    haxm failed to open driver今天在新的PC机上,安装android环境。PC的配置是CPU:i5,8G内存。在装intelhaxm-android.exe时候出错(见下图)。尝试:首先,查看了BIOS中对VT的支持,确定是支持并且开启状态。然后在网上试了安装haxm_extra_workaround.zip的方式,仍然不起作用。解决办法:重新安装另外一个版本的HAXM,见网址。安装后,成功解决。

    2022年6月28日
    27
  • QGIS 3.10 路径分析

    QGIS 3.10 路径分析网络数据集(networks)的创建、管理和可视化是GIS的重要组成部分。公路、铁路、管线等公用基础设施都可以建模为由线和节点组成的带有属性信息的网络数据。本教程将学习如何对路网进行建模,如何运用样式对路网属性可视化,同时通过QGIS3.10内置的路径分析工具找出两点之间的最短路径。任务概述通过华盛顿地区道路中心线图层,建立路网并查找城市中任意两点之间的最短路径。将会学到的其他技巧使用数据定义覆盖(datadefinedoverrides),根据线的方向对齐箭头符号。获取示范数据本教程

    2022年8月24日
    12
  • 三种编程命名规范(匈牙利命名法、驼峰式命名法、帕斯卡命名法)

    三种编程命名规范(匈牙利命名法、驼峰式命名法、帕斯卡命名法)1 匈牙利命名 开头字母用变量类型的缩写 其余部分用变量的英文或英文的缩写 要求单词第一个字母大写 ex intiMyAge i 是 int 类型的缩写 charcMyName 10 c 是 char 类型的缩写 floatfManHei f 是 float 类型的缩写 其他 前缀类型 abbyccbcrcx cydwfnhil

    2026年3月19日
    3
  • 手动UPX脱壳演示「建议收藏」

    手动UPX脱壳演示「建议收藏」首先,用PEid打开加壳后的程序CrackmeUPX.exe,可以发现使用的是UPX壳。UPX壳是一种比较简单的压缩壳,只需要根据堆栈和寄存器的值进行调试,就能找到程序的正确入口点。当然,如果不怕麻烦的话,也可以全程单步调试,直到出现像正常程序的入口点一样特征的代码,这样就找到了入口点。用我爱激活成功教程版ollydbg打开CrackmeUPX.exe,可以看到第一条指令是pushad,这显…

    2022年7月19日
    28
  • Java学习路线图(2020最新版)

    Java学习路线图(2020最新版)第一阶段:Java基础学习任何一门编程语言,首先要学习的是基础语法,开启Java学习的第一步,当然就是深入掌握计算机基础、编程基础语法,面向对象,集合、IO流、线程、并发、异常及网络编程,这些我们称之为JavaSE基础。当你掌握了这些内容之后,你就可以做出诸如:电脑上安装的迅雷下载软件、QQ聊天客户端、考勤管理系统等桌面端软件。第二阶段:数据库互联网最具价值的是数据,任何编程语言都需要解决数据存储问题,而数据存储的关键技术是数据库。MySQL和Oracle都是广受企业欢迎的数据库管理系统。Java

    2022年5月13日
    62
  • 2026年win7重装系统失败无法开机修复教程

    2026年win7重装系统失败无法开机修复教程

    2026年3月18日
    2

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号