原生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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • GoLand 2021.2.3 激活码(在线激活)

    GoLand 2021.2.3 激活码(在线激活),https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

    2022年3月14日
    524
  • Java爬虫系列三:使用Jsoup解析HTML「建议收藏」

    在上一篇随笔《Java爬虫系列二:使用HttpClient抓取页面HTML》中介绍了怎么使用HttpClient进行爬虫的第一步–抓取页面html,今天接着来看下爬虫的第二步–解析抓取到的html

    2022年2月16日
    38
  • Spring的AOP与动态代理「建议收藏」

    Spring的AOP与动态代理「建议收藏」Spring的AOP与动态代理

    2022年4月22日
    38
  • python爬虫学习教程,短短25行代码批量下载豆瓣妹子图片

    python爬虫学习教程,短短25行代码批量下载豆瓣妹子图片python爬虫学习教程,短短25行代码批量下载豆瓣妹子图片、非常简短,代码不是很多非常适合新手练习!学习python、python爬虫过程中有不懂的可以加入我的python零基础系统学习交流秋秋qun:前面是934,中间109,后面是170,与你分享Python企业当下人才需求及怎么从零基础学习Python,和学习什么内容。相关学习视频资料、开发工具都有分享!代码展示:#!/u…

    2025年11月17日
    3
  • 基于视频理解TSM和数据集Kinetics-400的视频行为识别

    基于视频理解TSM和数据集Kinetics-400的视频行为识别这个数据集包括了四百种的人体动作类别,每一种类别都至少有400个视频片段,每个片段都取自不同的Youtube视频,持续大概十秒。数据集的动作类别包括人和物体的交互-比如弹奏乐器;人与人的交互-比如握手。花了好久整理了Kinetics数据集,百度网盘下载地址:…

    2022年6月21日
    111
  • ODT 学习笔记「建议收藏」

    ODT 学习笔记「建议收藏」珂朵莉,要一直幸福下去哟!warning:本文在大白天书写,脑子可能不大好用。目前代码选自题解,等有时间自己写一下。简介ODT(OldDriverTree(中文译名张舟树),又称ChthollyTree,即众人皆知的珂朵莉树)是一种非常暴力的思想或者做法(注意我没有说是数据结构)简单来说,其核心思想是把一段区间推平(这也是其适用的地方——区间赋值),推平之后,原数列变成一段一段的了(每段的数值相同),然后就可以搞事了。ODT在随机数据下,复杂度近似O(mlogn)O(mlog

    2025年8月30日
    7

发表回复

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

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