table表頭固定,內容出滾動條。

表格固定。內容可以滾動(已截圖)。

        <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;
}

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章