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


相关推荐

  • childNodes和nodeType

    childNodes和nodeTypechildNodes 和 nodeType

    2026年3月16日
    1
  • NPM设置淘宝镜像命令

    npmconfigsetregistryhttp://registry.npm.taobao.org/转载于:https://my.oschina.net/hlhgo/blog/…

    2022年4月10日
    44
  • nacicat15 激活码_在线激活

    (nacicat15 激活码)这是一篇idea技术相关文章,由全栈君为大家提供,主要知识点是关于2021JetBrains全家桶永久激活码的内容https://javaforall.net/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~S32PGH0SQB-eyJsaWNlb…

    2022年3月26日
    47
  • 芯片测试术语,片内测试(BIST),ATE测试

    芯片测试术语,片内测试(BIST),ATE测试芯片测试分为如下几类 1 WAT WaferAccepta waferlevel 的管芯或结构测试 2 CP chipprobing waferlevel 的电路测试含功能 3 FT FinalTest devicelevel 的电路测试含功能 CP 测试 CP 是 waferlevel 的 chipprobing 是整个 wafer 工艺 包括 backgrinding 和 backmetal ifneed 对一些基本器件参数的测试 如 vt 阈值电压 Rdson 导通电阻

    2026年3月18日
    2
  • hadoop常用命令汇总[通俗易懂]

    hadoop常用命令汇总[通俗易懂]1、查看目录下的文件列表:hadoop fs –ls [文件目录]hadoop fs -ls -h /lance 2、将本机文件夹存储至hadoop上:hadoop fs –put [本机目录] [hadoop目录] hadoop fs -put lance / 3、在hadoop指定目录内创建新目录:hadoop fs –mkdir [目录] hadoop fs -mkdir /lance4、在…

    2022年6月24日
    32
  • javascript map函数的用法

    javascript map函数的用法map 函数根据一个回调函数创建一个新的函数 它会遍历数组中的每一个值例子 vararr1 1 3 5 6 8 19 constmap1 arr1 map function singleEl returnsingle 2 console log map1 返回的 map1 函数数组为 1 6 10 12 16 38 回调函数可用的参数

    2026年3月17日
    2

发表回复

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

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