real----表格

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MIp7g3J8-1629867557333)(images/screenshot_1629770593711.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k6oiRmVw-1629867557337)(images/screenshot_1629770610471.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XDAcBPFy-1629867557341)(images/screenshot_1629770634655.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3cKRLJ9U-1629867557351)(images/screenshot_1629770653007.png)]

css

 
.real-table {
    width:100%;
    background-color:#fff;
    color:#666
}
.real-table tr {
    transition:all .3s;
    -webkit-transition:all .3s
}
.real-table th {
    text-align:left;
    font-weight:400
}
.real-table tbody tr:hover, .real-table thead tr, .real-table-click, .real-table-header, .real-table-hover, .real-table-mend, .real-table-patch, .real-table-tool, .real-table-total, .real-table-total tr, .real-table[real-even] tr:nth-child(even) {
    background-color:#FAFAFA
}
.real-table td, .real-table th, .real-table-col-set, .real-table-fixed-r, .real-table-grid-down, .real-table-header, .real-table-page, .real-table-tips-main, .real-table-tool, .real-table-total, .real-table-view, .real-table[real-skin=line], .real-table[real-skin=row] {
    border-width:1px;
    border-style:solid;
    border-color:#eee
}
.real-table td, .real-table th {
    position:relative;
    padding:9px 15px;
    min-height:20px;
    line-height:20px;
    font-size:14px
}
.real-table[real-skin=line] td, .real-table[real-skin=line] th {
    border-width:0 0 1px
}
.real-table[real-skin=row] td, .real-table[real-skin=row] th {
    border-width:0 1px 0 0
}
.real-table[real-skin=nob] td, .real-table[real-skin=nob] th {
    border:none
}
.real-table img {
    max-width:100px
}
.real-table[real-size=lg] td, .real-table[real-size=lg] th {
    padding:15px 30px
}
.real-table-view .real-table[real-size=lg] .real-table-cell {
    height:40px;
    line-height:40px
}
.real-table[real-size=sm] td, .real-table[real-size=sm] th {
    font-size:12px;
    padding:5px 10px
}
.real-table-view .real-table[real-size=sm] .real-table-cell {
    height:20px;
    line-height:20px
}
.real-table[real-data] {
    display:none
}
.real-table-box {
    position:relative;
    overflow:hidden
}
.real-table-view .real-table {
    position:relative;
    width:auto;
    margin:0
}
.real-table-view .real-table[real-skin=line] {
    border-width:0 1px 0 0
}
.real-table-view .real-table[real-skin=row] {
    border-width:0 0 1px
}
.real-table-view .real-table td, .real-table-view .real-table th {
    padding:5px 0;
    border-top:none;
    border-left:none
}
.real-table-view .real-table th.real-unselect .real-table-cell span {
    cursor:pointer
}
.real-table-view .real-table td {
    cursor:default
}
.real-table-view .real-table td[data-edit=text] {
    cursor:text
}
.real-table-view .real-form-checkbox[real-skin=primary] i {
    width:18px;
    height:18px
}
.real-table-view .real-form-radio {
    line-height:0;
    padding:0
}
.real-table-view .real-form-radio>i {
    margin:0;
    font-size:20px
}
.real-table-init {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    text-align:center;
    z-index:110
}
.real-table-init .real-icon {
    position:absolute;
    left:50%;
    top:50%;
    margin:-15px 0 0 -15px;
    font-size:30px;
    color:#c2c2c2
}
.real-table-header {
    border-width:0 0 1px;
    overflow:hidden
}
.real-table-header .real-table {
    margin-bottom:-1px
}
.real-table-tool .real-inline[real-event] {
    position:relative;
    width:26px;
    height:26px;
    padding:5px;
    line-height:16px;
    margin-right:10px;
    text-align:center;
    color:#333;
    border:1px solid #ccc;
    cursor:pointer;
    -webkit-transition:.5s all;
    transition:.5s all
}
.real-table-tool .real-inline[real-event]:hover {
    border:1px solid #999
}
.real-table-tool-temp {
    padding-right:120px
}
.real-table-tool-self {
    position:absolute;
    right:17px;
    top:10px
}
.real-table-tool .real-table-tool-self .real-inline[real-event] {
    margin:0 0 0 10px
}
.real-table-tool-panel {
    position:absolute;
    top:29px;
    left:-1px;
    padding:5px 0;
    min-width:150px;
    min-height:40px;
    border:1px solid #d2d2d2;
    text-align:left;
    overflow-y:auto;
    background-color:#fff;
    box-shadow:0 2px 4px rgba(0, 0, 0, .12)
}
.real-table-cell, .real-table-tool-panel li {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
.real-table-tool-panel li {
    padding:0 10px;
    line-height:30px;
    -webkit-transition:.5s all;
    transition:.5s all
}
.real-menu li, .real-menu-body-title a:hover, .real-menu-body-title>.real-icon:hover {
    transition:all .3s
}
.real-table-tool-panel li .real-form-checkbox[real-skin=primary] {
    width:100%;
    padding-left:28px
}
.real-table-tool-panel li:hover {
    background-color:#F6F6F6
}
.real-table-tool-panel li .real-form-checkbox[real-skin=primary] i {
    position:absolute;
    left:0;
    top:0
}
.real-table-tool-panel li .real-form-checkbox[real-skin=primary] span {
    padding:0
}
.real-table-tool .real-table-tool-self .real-table-tool-panel {
    left:auto;
    right:-1px
}
.real-table-col-set {
    position:absolute;
    right:0;
    top:0;
    width:20px;
    height:100%;
    border-width:0 0 0 1px;
    background-color:#fff
}
.real-table-sort {
    width:10px;
    height:20px;
    margin-left:5px;
    cursor:pointer!important
}
.real-table-sort .real-edge {
    position:absolute;
    left:5px;
    border-width:5px
}
.real-table-sort .real-table-sort-asc {
    top:3px;
    border-top:none;
    border-bottom-style:solid;
    border-bottom-color:#b2b2b2
}
.real-table-sort .real-table-sort-asc:hover {
    border-bottom-color:#666
}
.real-table-sort .real-table-sort-desc {
    bottom:5px;
    border-bottom:none;
    border-top-style:solid;
    border-top-color:#b2b2b2
}
.real-table-sort .real-table-sort-desc:hover {
    border-top-color:#666
}
.real-table-sort[real-sort=asc] .real-table-sort-asc {
    border-bottom-color:#000
}
.real-table-sort[real-sort=desc] .real-table-sort-desc {
    border-top-color:#000
}
.real-table-cell {
    height:28px;
    line-height:28px;
    padding:0 15px;
    position:relative;
    box-sizing:border-box
}
.real-table-cell .real-form-checkbox[real-skin=primary] {
    top:-1px;
    padding:0
}
.real-table-cell .real-table-link {
    color:#01AAED
}
.laytable-cell-checkbox, .laytable-cell-numbers, .laytable-cell-radio, .laytable-cell-space {
    padding:0;
    text-align:center
}
.real-table-body {
    position:relative;
    overflow:auto;
    margin-right:-1px;
    margin-bottom:-1px
}
.real-table-body .real-none {
    line-height:26px;
    padding:30px 15px;
    text-align:center;
    color:#999
}
.real-table-fixed {
    position:absolute;
    left:0;
    top:0;
    z-index:101
}
.real-table-fixed .real-table-body {
    overflow:hidden
}
.real-table-fixed-l {
    box-shadow:1px 0 8px rgba(0, 0, 0, .08)
}
.real-table-fixed-r {
    left:auto;
    right:-1px;
    border-width:0 0 0 1px;
    box-shadow:-1px 0 8px rgba(0, 0, 0, .08)
}
.real-table-fixed-r .real-table-header {
    position:relative;
    overflow:visible
}
.real-table-mend {
    position:absolute;
    right:-49px;
    top:0;
    height:100%;
    width:50px
}
.real-table-tool {
    position:relative;
    z-index:890;
    width:100%;
    min-height:50px;
    line-height:30px;
    padding:10px 15px;
    border-width:0 0 1px
}
.real-table-tool .real-btn-container {
    margin-bottom:-10px
}
.real-table-page, .real-table-total {
    border-width:1px 0 0;
    margin-bottom:-1px;
    overflow:hidden
}
.real-table-page {
    position:relative;
    width:100%;
    padding:7px 7px 0;
    height:41px;
    font-size:12px;
    white-space:nowrap
}
.real-table-page>div {
    height:26px
}
.real-table-page .real-laypage {
    margin:0
}
.real-table-page .real-laypage a, .real-table-page .real-laypage span {
    height:26px;
    line-height:26px;
    margin-bottom:10px;
    border:none;
    background:0 0
}
.real-table-page .real-laypage a, .real-table-page .real-laypage span.real-laypage-curr {
    padding:0 12px
}
.real-table-page .real-laypage span {
    margin-left:0;
    padding:0
}
.real-table-page .real-laypage .real-laypage-prev {
    margin-left:-7px!important
}
.real-table-page .real-laypage .real-laypage-curr .real-laypage-em {
    left:0;
    top:0;
    padding:0
}
.real-table-page .real-laypage button, .real-table-page .real-laypage input {
    height:26px;
    line-height:26px
}
.real-table-page .real-laypage input {
    width:40px
}
.real-table-page .real-laypage button {
    padding:0 10px
}
.real-table-page select {
    height:18px
}
.real-table-patch .real-table-cell {
    padding:0;
    width:30px
}
.real-table-edit {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    padding:0 14px 1px;
    border-radius:0;
    box-shadow:1px 1px 20px rgba(0, 0, 0, .15)
}
.real-table-edit:focus {
    border-color:#5FB878!important
}
select.real-table-edit {
    padding:0 0 0 10px;
    border-color:#d2d2d2
}
.real-table-view .real-form-checkbox, .real-table-view .real-form-radio, .real-table-view .real-form-switch {
    top:0;
    margin:0;
    box-sizing:content-box
}
.real-colorpicker-alpha-slider, .real-colorpicker-side-slider, .real-menu, .real-menu *, .real-nav {
    box-sizing:border-box
}
.real-table-view .real-form-checkbox {
    top:-1px;
    height:26px;
    line-height:26px
}
.real-table-view .real-form-checkbox i {
    height:26px
}
.real-table-grid .real-table-cell {
    overflow:visible
}
.real-table-grid-down {
    position:absolute;
    top:0;
    right:0;
    width:26px;
    height:100%;
    padding:5px 0;
    border-width:0 0 0 1px;
    text-align:center;
    background-color:#fff;
    color:#999;
    cursor:pointer
}
.real-table-grid-down .real-icon {
    position:absolute;
    top:50%;
    left:50%;
    margin:-8px 0 0 -8px
}
.real-table-grid-down:hover {
    background-color:#fbfbfb
}
body .real-table-tips .real-content {
    background:0 0;
    padding:0;
    box-shadow:0 1px 6px rgba(0, 0, 0, .12)
}
.real-table-tips-main {
    margin:-44px 0 0 -1px;
    max-height:150px;
    padding:8px 15px;
    font-size:14px;
    overflow-y:scroll;
    background-color:#fff;
    color:#666
}
.real-table-tips-c {
    position:absolute;
    right:-3px;
    top:-13px;
    width:20px;
    height:20px;
    padding:3px;
    cursor:pointer;
    background-color:#666;
    border-radius:50%;
    color:#fff
}
.real-table-tips-c:hover {
    background-color:#777
}
.real-table-tips-c:before {
    position:relative;
    right:-2px
} 

html

<blockquote class="real-elem-quote">
  本页面只是演示静态表格，如果你需要的是数据表格，可前往： 
</blockquote>   
 
 <fieldset class="real-elem-field real-field-title" style="margin-top: 20px;">
  <legend> 基础属性</legend>
</fieldset>

静态表格支持以下基础属性，可定义不同风格/尺寸的表格样式：

 <table class="real-table">
 
    <thead>
      <tr>
        <th>属性名</th>
        <th>属性值</th>
        <th>备注</th>
      
      </tr> 
    </thead>
    <tbody>
      <tr>
        <td>real-even</td>
        <td>无</td>
        <td>用于开启 隔行 背景，可与其它属性一起使用</td>
       
      </tr>
      <tr>
        <td>real-skin="属性值"</td>
        <td>line（行边框风格）<br>row（列边框风格）<br>nob （无边框风格）	</td>
        <td>若使用默认风格不设置该属性即可</td>
       
      </tr>
 
      <tr>
        <td>real-size="属性值"</td>
        <td>sm （小尺寸））<br>lg （大尺寸 	</td>
        <td>若使用默认尺寸不设置该属性即可</td>
       
      </tr> 
	 
    </tbody>
  </table>     

<fieldset class="real-elem-field real-field-title" style="margin-top: 20px;">
  <legend>默认表格</legend>
</fieldset>






 
<div class="real-form">
   
    
    
    
  <table class="real-table">
 
    <thead>
      <tr>
        <th>人物</th>
        <th>民族</th>
        <th>出场时间</th>
        <th>格言</th>
      </tr> 
    </thead>
    <tbody>
      <tr>
        <td>贤心</td>
        <td>汉族</td>
        <td>1989-10-14</td>
        <td>人生似修行</td>
      </tr>
      <tr>
        <td>张爱玲</td>
        <td>汉族</td>
        <td>1920-09-30</td>
        <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
      </tr>
      <tr>
        <td>Helen Keller</td>
        <td>拉丁美裔</td>
        <td>1880-06-27</td>
        <td> Life is either a daring adventure or nothing.</td>
      </tr>
      <tr>
        <td>岳飞</td>
        <td>汉族</td>
        <td>1103-北宋崇宁二年</td>
        <td>教科书再滥改，也抹不去“民族英雄”的事实</td>
      </tr>
      <tr>
        <td>孟子</td>
        <td>华夏族（汉族）</td>
        <td>公元前-372年</td>
        <td>猿强，则国强。国强，则猿更强！ </td>
      </tr>
    </tbody>
  </table>
</div>
         
<fieldset class="real-elem-field real-field-title" style="margin-top: 50px;">
  <legend>行边框表格</legend>
</fieldset>  
 
<table class="real-table" real-skin="line">
  <colgroup>
    <col width="150">
    <col width="150">
    <col width="200">
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>人物</th>
      <th>民族</th>
      <th>出场时间</th>
      <th>格言</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
      <td>贤心</td>
      <td>汉族</td>
      <td>1989-10-14</td>
      <td>人生似修行</td>
    </tr>
    <tr>
      <td>张爱玲</td>
      <td>汉族</td>
      <td>1920-09-30</td>
      <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
    </tr>
    <tr>
      <td>Helen Keller</td>
      <td>拉丁美裔</td>
      <td>1880-06-27</td>
      <td> Life is either a daring adventure or nothing.</td>
    </tr>
    <tr>
      <td>岳飞</td>
      <td>汉族</td>
      <td>1103-北宋崇宁二年</td>
      <td>教科书再滥改，也抹不去“民族英雄”的事实</td>
    </tr>
    <tr>
      <td>孟子</td>
      <td>华夏族（汉族）</td>
      <td>公元前-372年</td>
      <td>猿强，则国强。国强，则猿更强！ </td>
    </tr>
  </tbody>
</table>   
         
<fieldset class="real-elem-field real-field-title" style="margin-top: 50px;">
  <legend>列边框表格</legend>
</fieldset>  
 
<table class="real-table" real-even="" real-skin="row">
  <colgroup>
    <col width="150">
    <col width="150">
    <col width="200">
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>人物</th>
      <th>民族</th>
      <th>出场时间</th>
      <th>格言</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
      <td>贤心</td>
      <td>汉族</td>
      <td>1989-10-14</td>
      <td>人生似修行</td>
    </tr>
    <tr>
      <td>张爱玲</td>
      <td>汉族</td>
      <td>1920-09-30</td>
      <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
    </tr>
    <tr>
      <td>Helen Keller</td>
      <td>拉丁美裔</td>
      <td>1880-06-27</td>
      <td> Life is either a daring adventure or nothing.</td>
    </tr>
    <tr>
      <td>岳飞</td>
      <td>汉族</td>
      <td>1103-北宋崇宁二年</td>
      <td>教科书再滥改，也抹不去“民族英雄”的事实</td>
    </tr>
    <tr>
      <td>孟子</td>
      <td>华夏族（汉族）</td>
      <td>公元前-372年</td>
      <td>猿强，则国强。国强，则猿更强！ </td>
    </tr>
  </tbody>
</table>  
         
<fieldset class="real-elem-field real-field-title" style="margin-top: 50px;">
  <legend>无边框表格</legend>
</fieldset>  
 
<table class="real-table" real-even="" real-skin="nob">
  <colgroup>
    <col width="150">
    <col width="150">
    <col width="200">
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>人物</th>
      <th>民族</th>
      <th>出场时间</th>
      <th>格言</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
      <td>贤心</td>
      <td>汉族</td>
      <td>1989-10-14</td>
      <td>人生似修行</td>
    </tr>
    <tr>
      <td>张爱玲</td>
      <td>汉族</td>
      <td>1920-09-30</td>
      <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
    </tr>
    <tr>
      <td>Helen Keller</td>
      <td>拉丁美裔</td>
      <td>1880-06-27</td>
      <td> Life is either a daring adventure or nothing.</td>
    </tr>
    <tr>
      <td>岳飞</td>
      <td>汉族</td>
      <td>1103-北宋崇宁二年</td>
      <td>教科书再滥改，也抹不去“民族英雄”的事实</td>
    </tr>
    <tr>
      <td>孟子</td>
      <td>华夏族（汉族）</td>
      <td>公元前-372年</td>
      <td>猿强，则国强。国强，则猿更强！ </td>
    </tr>
  </tbody>
</table> 
 
<fieldset class="real-elem-field real-field-title" style="margin-top: 50px;">
  <legend>其它尺寸表格</legend>
</fieldset> 
 
<table class="real-table" real-size="lg">
  <colgroup>
    <col width="150">
    <col width="200">
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>昵称</th>
      <th>加入时间</th>
      <th>签名</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
      <td>贤心</td>
      <td>2016-11-29</td>
      <td>人生就像是一场修行</td>
    </tr>
    <tr>
      <td>许闲心</td>
      <td>2016-11-28</td>
      <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
    </tr>
    <tr>
      <td>sentsin</td>
      <td>2016-11-27</td>
      <td> Life is either a daring adventure or nothing.</td>
    </tr>
  </tbody>
</table>
<table class="real-table" real-size="sm">
  <colgroup>
    <col width="150">
    <col width="200">
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>昵称</th>
      <th>加入时间</th>
      <th>签名</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
      <td>贤心</td>
      <td>2016-11-29</td>
      <td>人生就像是一场修行</td>
    </tr>
    <tr>
      <td>许闲心</td>
      <td>2016-11-28</td>
      <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
    </tr>
    <tr>
      <td>sentsin</td>
      <td>2016-11-27</td>
      <td> Life is either a daring adventure or nothing.</td>
    </tr>
  </tbody>
</table>