<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<table border="1" id="table">
<caption>我是表格</caption>
<thead>
<th>aa</th>
<th>bb</th>
<th>cc</th>
</thead>
<tbody>
<tr>
<td>11</td>
<td>22</td>
<td>33</td>
</tr>
<tr>
<td>44</td>
<td>55</td>
<td></td>
</tr>
</tbody>
</table>
<br>
<button id="bc">border-collpase</button>
<button id="bs">border-spacing</button>
<button id="cs">caption-side</button>
<button id="ec">empty-cells</button>
<button id="reset">重設</button>
<script type="text/javascript">
$('#bc').click(function(){
$('#table').css('border-collapse','collapse');
});
$('#bs').click(function(){
$('#table').css('border-spacing','+=10');
});
$('#cs').click(function(){
$('#table').css('caption-side','bottom');
});
$('#ec').click(function(){
$('#table').css('empty-cells','hide');
});
$('#reset').click(function(){
$('#table').css('border-collapse','separate');
$('#table').css('border-spacing','2px');
$('#table').css('empty-cells','show');
$('#table').css('caption-side','top');
});
</script>
</body>
</html>
全站熱搜
留言列表
伺服器架設 (1)
