原生table样式示例_table好看的css样式

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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;
}