# 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>
```
