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


相关推荐

  • c++学生管理系统源代码_学校运营管理系统

    c++学生管理系统源代码_学校运营管理系统C#学员管理系统C#学员管理系统是在控制台输出的项目,和OOP学员管理系统相似。①创建一个学员的实体类Student,实现其构造方法和封装:usingSystem;usingSystem.Collections.Generic;usingSystem.Linq;usingSystem.Text;///<summary>///实体类///</sum…

    2022年9月20日
  • springboot集成elasticsearch注意事项

    springboot集成elasticsearch注意事项一、elasticsearch基础  这里假设各位已经简单了解过elasticsearch,并不对es进入更多的,更深层次的解释,如有必要,会在写文章专门进行es讲解。  Elasticsearch是一个基于ApacheLucene(TM)的开源搜索引擎。无论在开源还是专有领域,Lucene可以被认为是迄今为止最先进、性能最好的、功能最全的搜索引擎库。  但是,Lucene只是一个…

    2022年6月24日
  • java用位运算实现加减乘除的过程_java四则运算

    java用位运算实现加减乘除的过程_java四则运算我们经常使用的加减乘除,我们所看到的只是表面的效果,那么加减乘除在底层究竟是怎么实现的?今天就让我们一探究竟.今天用位运算实现的加减乘除不使用任何的加减乘除符号.

    2022年10月30日
  • 用python来开发webgame服务端(1)[通俗易懂]

    用python来开发webgame服务端(1)[通俗易懂]http://ciniao.me/article.php?id=9 刺鸟原创文章,转载请注明出处    在开始之前,先简单描述一下项目的特点:我要实现的是一个mmorpg的webgame,地图上需要看到其他的玩家,战斗系统采用半回合制的模式,所谓的半回合制,即是:采用回合制的画面布局,友方和敌方分列左右,但是战斗的中途,其他的玩家可以及时的随时插入这场战斗。当然,作为一款rpgGa

    2022年5月30日
  • 华三vlan配置_路由器配置vlan的步骤

    华三vlan配置_路由器配置vlan的步骤基于MAC地址划分vlan配置思路:创建VLAN100、VLAN200。配置DeviceA和DeviceC的上行端口为Trunk端口,并允许VLAN100和VLAN200的报文通过。配置DeviceB的下行端口为Trunk端口,并允许VLAN100和VLAN200的报文通过;上行端口分别加入VLAN100、VLAN200。Laptop1和Laptop2的MAC地址分别与VLAN100、VLAN200关联。SWA与SWC的配置一致:创建vlan:vlan100

    2022年9月19日
  • Springboot + Spring Security + jwt-token实现权限认证

    Springboot + Spring Security + jwt-token实现权限认证

    2021年8月31日

发表回复

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

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