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


相关推荐

  • 监督学习、无监督学习、自监督学习和强化学习

    监督学习、无监督学习、自监督学习和强化学习监督学习监督学习是目前最常见的机器学习类型。给定一组样本(通常由人工标注),他可以学会将输入数据映射到已知目标。一般来说,近年来过度关注的深度学习应用几乎都属于监督学习,比如光学字符识别、语音识别、图像分类和语言翻译。监督学习主要包括分类和回归,但还有更多的奇特变体,主要包括如下几种:1、序列生成(sequencegeneration)。给定一张图像,预测描述图像的文字。序列生成有时可…

    2025年11月15日
    4
  • 网站的域名带www的和不带www的有什么区别呀

    网站的域名带www的和不带www的有什么区别呀

    2021年10月25日
    92
  • iOS--无限后台定位

    iOS--无限后台定位

    2022年3月13日
    55
  • 区块链技术开发入门书籍_区块链小白入门

    区块链技术开发入门书籍_区块链小白入门本文将对区块链开发使用的技术、工具、语言、平台做一次全景扫描,并对其应用状况进行分类。新工具不仅提升效率,还可为前人所不能。作为活跃开发领域之一,区块链新技术、工具、平台、语言与框架层出不穷,然而面

    2022年8月6日
    10
  • c++虚函数详解(你肯定懂了)

    c++虚函数详解(你肯定懂了)转自:c++虚函数 大牛的文章,就是通俗易懂,言简意赅。前言C++中的虚函数的作用主要是实现了多态的机制。关于多态,简而言之就是用父类型别的指针指向其子类的实例,然后通过父类的指针调用实际子类的成员函数。这种技术可以让父类的指针有“多种形态”,这是一种泛型技术。所谓泛型技术,说白了就是试图使用不变的代码来实现可变的算法。比如:模板技术,RTTI技术,虚函数技术,要么是试图做到在编译时决议…

    2022年7月26日
    10
  • 管理学第三章_企业集团管理第五章自测

    管理学第三章_企业集团管理第五章自测文章目录主要内容项目范围6个过程范围管理的重要性总表5.1范围管理概述5.2规划范围管理5.3收集需求主要内容项目范围6个过程(1)规划范围管理:对如何定义、确认和控制项目范围的过程进行描述。(2)收集需求:为实现项目目标,明确并记录项目干系人的相关需求的过程。(3)定义范围:详细描述产品范围和项目范围,编制项目范围说明书,作为以后项目决策的基础。(4)刨建工作分解结构(WBS):把整个项目工作分解为较小的、易于管理的组成部分,形成一个自上而下的分解结构。(5)确认范围:正式验收已完成的可交付

    2022年9月22日
    3

发表回复

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

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