table表头固定，数据内容滚动

平时的工作中，常常会碰到一种情况，table展示数据，并且数据一旦超过一定条数，但是又不必须要分页的时候，就需要进行滚动条展示数据。

这时候就出现一种需求：table的数据表头固定住不动，而内容则可以进行滚动。

其实只要修改其中几个样式即可。↓

table tbody {
	height: 180px;
	display: block;
	overflow-y: scroll;
}
table thead, tbody tr {
	display: table;
	table-layout: fixed;
	width: 100%;
}
table thead {
	width: calc(100% - 8px);
}

以下是基础代码：

<div style="width: 420px;height: 200px;">
			<table class="iceui-table">
				<thead>
					<tr>
						<td>第一个</td>
						<td>第二个</td>
						<td>第三个</td>
						<td>第四个</td>
						<td>第五个</td>
						<td>第六个</td>
					</tr>
				</thead>
				<tbody>
					<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>