由原来的这样的样式,变为这样的:
原来的5列到了第三列;
需要引入俩个js:
1.drag.js
2.jquery-1.1-0.2.js;
html:
<div id="main">
<table id="headTable" border="1" cellpadding="0" cellspacing="0" style="width:400px;text-align:center;">
<tr style="background-color: #E5E5E5">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
<table id="mainTable" border="1" cellpadding="0" cellspacing="0" style="width:400px;text-align:center;">
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td><div style="color:red;">ten<span style="display:none">123</span></div>10</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td><div style="color:red;">ten<span style="display:none">123</span></div>10</td>
</tr>
<tr>
<td>61</td>
<td>71</td>
<td>81</td>
<td>91</td>
<td><div style="color:red;">ten<span style="display:none">123</span></div>101</td>
</tr>
</table>
<div id="info"></div>
<div id="triangle">
<div class="arrow arrow-down"></div>
<div class="arrow arrow-up"></div>
</div>
</div>
必须是俩个table来实现,表头一个table,表内容一个table,然后样式最好自己写一样的,否则很麻烦,最好把列宽搞好,否则绝对是个问题。代码是从别人那里拷来的。分享一下;