原生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;
}

 

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • seekg前记得手动清除EOF标志位[通俗易懂]

    seekg前记得手动清除EOF标志位[通俗易懂]问题因为具体任务,需要一个文件读取两遍。之前在第一次读取完毕后(此时EOF已经置位),直接调用is.seekg(0,is.beg);然后下次读取时直接退出了,即EOF标志位并没有被清除。查看C++标准库说明:C++98Iftheeofbitflagissetbeforethecall,thefunctionfails(setsfailbitandreturns).

  • 可以调整gif动画图片尺寸的很实用的php类建议收藏

    类的使用demo:temp_dir="keleyi";$gr->resize("keleyi.gif","keleyi_resized.g

    2021年12月20日
  • clion2021.4激活码_通用破解码

    clion2021.4激活码_通用破解码,https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • keyvaluepair_Dictionary及KeyValuePair使用「建议收藏」

    keyvaluepair_Dictionary及KeyValuePair使用「建议收藏」//////除去数组中的空值和签名参数并以字母a到z的顺序排序//////过滤前的参数组///过滤后的参数组publicstaticDictionaryFilterPara(SortedDictionarydicArrayPre){DictionarydicArray=newDictionary();foreach(KeyValuePairtempindicArrayP…

  • 2018 java 阿里笔试题

    2018 java 阿里笔试题想进阿里的同学注意了,这里是修真院面试笔记整理,那么这里就给大家分享一下【2018java阿里笔试题】1、String,StringBuffer,StringBuilder的区别是什么?String为什么是不可变的?2、Vector,ArrayList,LinkedList的区别是什么?3、HashTable,HashMap,TreeMap区别?5、Tomcat,A…

  • 滑动窗口 leetcode_滑动窗口的概念

    滑动窗口 leetcode_滑动窗口的概念原题链接给你一个整数数组 nums,有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧。你只可以看到在滑动窗口内的 k 个数字。滑动窗口每次只向右移动一位。返回滑动窗口中的最大值。示例 1:输入:nums = [1,3,-1,-3,5,3,6,7], k = 3输出:[3,3,5,5,6,7]解释:滑动窗口的位置 最大值————— —–[1 3 -1] -3 5 3 6 7

发表回复

您的电子邮箱地址不会被公开。

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