<table class="cusTable">
<thead>
<tr>
<th data-colspan="50" data-align="center">就业情况</th>
</tr>
<tr>
<th data-colspan="5" data-align="center">就业</th>
<th data-colspan="5" data-align="center">就业</th>
<th data-colspan="5" data-align="center">就业</th>
</tr>
<tr>
<th data-field="ceshi">1</th>
<th data-field="ceshi">2</th>
<th data-field="ceshi">2</th>
<th data-field="ceshi">2</th>
<th data-field="ceshi">2</th>
<th data-field="ceshi">水平</th>
<th data-field="ceshi">水平</th>
<th data-field="ceshi">水平</th>
<th data-field="ceshi">水平</th>
<th data-field="ceshi">水平</th>
<th data-field="ceshi">测试</th>
<th data-field="ceshi">测试</th>
<th data-field="ceshi">测试</th>
<th data-field="ceshi">测试</th>
<th data-field="ceshi">测试</th>
</tr>
</thead>
</table>
引入bootstrap的js做出来是这样的，
html中给table增加外面的标题框可以用div嵌套表格的方式来实现：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf8">
<title>Untitled Document</title>
<script language="JavaScript" src="js/prototype.js"></script>
<script language="JavaScript">
function changeStyle(){
if(document.getElementById('test').style.display=='none'){
alert("show")
document.getElementById('test').style.display='block'
}else{
alert("hide")
document.getElementById('test').style.display='none'
}
}
</script>
</head>
<body>
<input value="测试" type="button" onclick="changeStyle()">
<select type="button" value="测试" onchange="changeStyle()">
<option>1</option>
<option>2</option>
</select>
<table>
<tr>
<td><!--在table中嵌套div时，必须将div放在td中，否则达不到预期效果-->
<div id="test" style="display:none">
<table>
<tr>
<td>
<input type="text" value="1"/>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
效果：
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）