表格固定。內容可以滾動(已截圖)。
<div class="m-table-scroll ">
<table class="m-table table-bordered is-fixed">
<thead>
<tr>
<th class="thead">標題</th>
<th class="thead">標題</th>
<th class="thead">標題</th>
<th class="thead">標題</th>
<th class="thead">標題</th>
<th class="thead">標題</th>
</tr>
</thead>
<tbody class="is-fixed-height scrollbar-inner">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</tbody>
</table>
</div>
.m-table-scroll{
overflow-x: auto;
}
.m-table{
table-layout: fixed;
width: 100%;
}
.table-border,.table-bordered{
border-collapse: separate;
}
.m-table .thead,.m-table td{
padding: 0 8px;
height: 36px;
}
.m-table.table-border .thead,.m-table.table-border td{
border-bottom:1px solid #ddd;
}
.m-table.table-border .thead{
border-top: 1px solid #ddd;
}
.m-table.table-bordered{
border: 1px solid #ddd;
}
.m-table.table-bordered .thead,.m-table.table-bordered td{
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.m-table.table-bordered .thead:last-child,.m-table.table-bordered td:last-child{
border-right-width: 0;
}
.m-table.table-bordered tr:last-child td{
border-bottom-width: 0;
}
.m-table.table-striped tbody > tr:nth-child(2n+1) > td,
.m-table .table-striped tbody > tr:nth-child(2n+1) > th {
background-color: #f5f5f5;
}
.m-table.table-hover tbody>tr:hover{
background-color: #f5f5f5;
}
.m-table.table-thead-bg .thead{
background-color: #f5f5f5;
}
/*上面是表格的基礎樣式*/
/*下面是thead固定 tbody滾動的必須樣式*/
.is-fixed tbody {
display: block;
height: 120px;
overflow-y: scroll;
width: 100%;
}
.is-fixed thead,
.is-fixed tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}
/*一定要在is-fixed-height上面加滾動的高度 不能加在scrollbar-inner*/
.is-fixed-height{
height: 250px;
}
/*visible*/
.scroll-element.scroll-y.scroll-scrolly_visible{
visibility: hidden;
}
.scroll-wrapper:hover .scroll-element.scroll-y.scroll-scrolly_visible{
visibility: visible;
}
.m-table tbody>tr:hover {
background-color: #f5f5f5;
}