先上图不说话
工作中其实用到表格的地方还是蛮多的。好看又实用的表格就是硬需求。废话不多说,讲讲思路吧,要做成上图的表格其实需要两个table,来模拟成一个table。
注意事项:
- 第一个table,只有表头,没有表体。可以通过col标签来设置每列的宽度。为了增加美观
- 我们表头的列数要比表体要多一列,倒数第二列为不设置宽度(当然可以多出一个空列,只为美观)。
- 这一列设置宽度放在最后一列(宽度为浏览器滚动条的宽度),col的个数要与列数相同。
- 第二个table,只有标体,没有表头。
- 为了让表体能够滚动,我们需要在table的外层套一个div并设置div的高度。样式为overflow:atuo;
- 表体的列数比表头少一列,倒数第二列为不设置宽度(当然可以多出一个空列,只为美观)。
- col的个数要与列数相同。
- table 设置样式 style=”table-layout:fixed” ,有的地方col便签不能设定宽度,加上这个就ok拉
- 第一个table
<table style="table-layout:fixed">
<colgroup>
<col width="60">
<col width="220px">
<col width="">
<col width="16px">
</colgroup>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>成绩</th>
<th></th>
</tr>
</thead>
</table >
- 第二个table
<div style="height:430px;">
<table style="table-layout:fixed">
<colgroup >
<col width="60">
<col width="220px">
<col width="">
</colgroup>
<tbody">
<tr>
<td>shuah</td>
<td>男</td>
<td>100</td>
</tr>
</tbody>
</table>
</div>
例子
body标签内html代码
<div class="cloudTableAuto">
<!-- 第一个table -->
<table class="cloudTable cloudMtxTableHead">
<colgroup>
<col width="60">
<col width="220px">
<col width="230px">
<col width="90px">
<col width="90px">
<col width="160px">
<col width="150px">
<col width="">
<col width="16px">
</colgroup>
<thead class="cloudTable_header">
<tr>
<th>序号</th>
<th>美途秀</th>
<th>旅游机构</th>
<th>Pv</th>
<th>Uv</th>
<th>活跃产品数(Uv≥20)</th>
<th>ip</th>
<th>分享率</th>
<th style="width: 16px;"></th>
</tr>
</thead>
</table >
<!-- 第二个table 外层包裹div并设置高度,超出出现滚动条 -->
<div class="cloudMtxTable_body">
<table class="cloudTable" style="table-layout:fixed">
<colgroup >
<col width="60">
<col width="220px">
<col width="230px">
<col width="90px">
<col width="90px">
<col width="160px">
<col width="150px">
<col width="">
</colgroup>
<tbody class="cloudTable_body ">
<tr>
<td>1</td>
<td class="data-cell"><span>美途这发的辅导辅导费是我的秀</span></td>
<td class="data-cell">发的辅导辅导费是我的旅游机构</td>
<td>323232</td>
<td>32323232</td>
<td>3232323</td>
<td>113.118.186.213</td>
<td>90%</td>
</tr>
<tr>
<td>1</td>
<td class="data-cell"><span>美途这发的辅导辅导费是我的秀</span></td>
<td class="data-cell">发的辅导辅导费是我的旅游机构</td>
<td>575632</td>
<td>3738432</td>
<td>359761</td>
<td>113.118.186.213</td>
<td>分享率</td>
</tr><tr>
<td>1</td>
<td class="data-cell"><span>美途这发的辅导辅导费是我的秀</span></td>
<td class="data-cell">发的辅导辅导费是我的旅游机构</td>
<td>323232</td>
<td>32323232</td>
<td>3232323</td>
<td>113.118.186.213</td>
<td>分享率</td>
</tr><tr>
<td>1</td>
<td class="data-cell"><span>美途这发的辅导辅导费是我的秀</span></td>
<td class="data-cell">发的辅导辅导费是我的旅游机构</td>
<td>323232</td>
<td>32323232</td>
<td>3232323</td>
<td>113.118.186.213</td>
<td>分享率</td>
</tr>
<tr>
<td>1</td>
<td class="data-cell"><span>美途这发的辅导辅导费是我的秀</span></td>
<td class="data-cell">发的辅导辅导费是我的旅游机构</td>
<td>323232</td>
<td>32323232</td>
<td>3232323</td>
<td>113.118.186.213</td>
<td>分享率</td>
</tr>
<tr>
<td>1</td>
<td class="data-cell"><span>美途这发的辅导辅导费是我的秀</span></td>
<td class="data-cell">发的辅导辅导费是我的旅游机构</td>
<td>323232</td>
<td>32323232</td>
<td>3232323</td>
<td>113.118.186.213</td>
<td>分享率</td>
</tr>
<tr>
<td>1</td>
<td class="data-cell"><span>美途这发的辅导辅导费是我的秀</span></td>
<td class="data-cell">发的辅导辅导费是我的旅游机构</td>
<td>323232</td>
<td>32323232</td>
<td>3232323</td>
<td>113.118.186.213</td>
<td>分享率</td>
</tr>
<tr>
<td>1</td>
<td class="data-cell"><span>美途这发的辅导辅导费是我的秀</span></td>
<td class="data-cell">发的辅导辅导费是我的旅游机构</td>
<td>323232</td>
<td>32323232</td>
<td>3232323</td>
<td>113.118.186.213</td>
<td>分享率</td>
</tr>
<tr>
<td>1</td>
<td class="data-cell"><span>美途这发的辅导辅导费是我的秀</span></td>
<td class="data-cell">发的辅导辅导费是我的旅游机构</td>
<td>323232</td>
<td>32323232</td>
<td>3232323</td>
<td>113.118.186.213</td>
<td>分享率</td>
</tr>
<tr>
<td>1</td>
<td class="data-cell"><span>美途这发的辅导辅导费是我的秀</span></td>
<td class="data-cell">发的辅导辅导费是我的旅游机构</td>
<td>323232</td>
<td>32323232</td>
<td>3232323</td>
<td>113.118.186.213</td>
<td>分享率</td>
</tr>
<tr>
<td>1</td>
<td class="data-cell"><span>美途这发的辅导辅导费是我的秀</span></td>
<td class="data-cell">发的辅导辅导费是我的旅游机构</td>
<td>323232</td>
<td>32323232</td>
<td>3232323</td>
<td>113.118.186.213</td>
<td>分享率</td>
</tr>
<tr>
<td>1</td>
<td class="data-cell"><span>美途这发的辅导辅导费是我的秀</span></td>
<td class="data-cell">发的辅导辅导费是我的旅游机构</td>
<td>323232</td>
<td>32323232</td>
<td>3232323</td>
<td>113.118.186.213</td>
<td>分享率</td>
</tr>
</tbody>
</table>
</div>
</div>
表格css样式
table {
border-collapse: collapse;
border-spacing: 0;
}
.cloudTableAuto{
width:1200px;
margin:20px auto;
}
.cloudTable{
border: 1px solid #e0e6ed;
font-size: 16px;
width:100%;
}
.cloudTableTitle{
padding:10px 20px;
}
.cloudTable td {
height: 40px;
min-width: 0px;
box-sizing: border-box;
vertical-align: middle;
position: relative;
border-bottom: 1px solid #e0e6ed;
}
/* 表头 */
.cloudTable_header tr {
background-color: #efeff1;
}
.cloudTable_header th {
min-width: 0;
box-sizing: border-box;
text-overflow: ellipsis;
vertical-align: middle;
position: relative;
border-bottom: 1px solid #e0e6ed;
border-right: 1px solid #e0e6ed;
padding: 10px 0px;
white-space: nowrap;
overflow: hidden;
font-weight: bold;
text-align: -internal-center;
}
/* 表身体 */
.cloudTable_body tr td {
height: 40px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
box-sizing: border-box;
-webkit-box-sizing: border-box;
font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
}
.cloudTable_body tr td {
box-sizing: border-box;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
border-right: 1px solid #e0e6ed;
}
.cloudMtxTable_body{
/*height:102px;*/
height:402px;
width:100%;
overflow-y: auto;
border-bottom: 1px solid #e0e6ed;
}
/* 公用样式 */
.data-cell {
padding-left: 15px;
padding-right: 15px;
font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
}
.cloudTable_body tr:hover {
background-color: #c5e8fe;
}
ok了,不说废话了,自己去试一下吧。