用js实现table单元格高宽调整,兼容合并单元格(兼

用js实现table单元格高宽调整,兼容合并单元格(兼

CSS:

复制代码 代码如下:


body{margin:0px;padding:0px;-moz-user-select:none;cursor:default;}

.tabEditDiv{position:absolute;width:15px;height:15px;cursor:pointer;}
.seltab{position:absolute;width:15px;height:15px;cursor:pointer;background:url(images/seltab.gif) no-repeat;}
.splitx{overflow:hidden;position:absolute;height:3px;cursor:row-resize;background:red !important;filter:Alpha(opacity=10);-moz-opacity:0.1;opacity: 0.1; }
.splity{overflow:hidden;position:absolute;width:3px;cursor:col-resize;background:red !important;filter:Alpha(opacity=10);-moz-opacity:0.1;opacity: 0.1;}
#tabletitle{font-weight:bold;font-size:18px;height:30px;width:800px;margin:0 auto;text-align:center;font-family:宋体;line-height:30px;}
#tabletitle input{width:100%;border:0px;height:28px;line-height:30px;text-align:center;font-weight:bold;font-size:18px;font-family:宋体;}
.finelinetable{border-right:1px solid #000;border-top:1px solid #000;border-collapse:collapse;font-size:13px;width:800px;margin:0 auto;}
.finelinetable td{border-left:1px solid #000;border-bottom:1px solid #000;height:25px;}

HTML:

复制代码 代码如下:


<body>
     <div>表格标题</div>
     <table>
         <tr>
             <td colspan="8">1</td>
         </tr>
         <tr>
             <td rowspan="3">2</td>
             <td>3</td>
             <td colspan="3">4</td>
             <td>5</td>
             <td>6</td>
             <td>7</td>
         </tr>
         <tr>
             <td>8</td>
             <td>9</td>
             <td>10</td>
             <td colspan="2">11</td>
             <td>12</td>
             <td>13</td>
         </tr>
         <tr>
             <td>14</td>
             <td colspan="3">15</td>
             <td>16</td>
             <td>17</td>
             <td>18</td>
         </tr>
         <tr>
             <td colspan="8">&nbsp;</td>
         </tr>
         <tr>
             <td rowspan="3">&nbsp;</td>
             <td>&nbsp;</td>
             <td colspan="2">&nbsp;</td>
             <td>&nbsp;</td>
             <td colspan="3">&nbsp;</td>
         </tr>
         <tr>
             <td>&nbsp;</td>
             <td colspan="2">&nbsp;</td>
             <td>&nbsp;</td>
             <td colspan="3">&nbsp;</td>
         </tr>
         <tr>
             <td>&nbsp;</td>
             <td colspan="2">&nbsp;</td>
             <td>&nbsp;</td>
             <td colspan="3">&nbsp;</td>
         </tr>
         <tr>
             <td>&nbsp;</td>
             <td colspan="7">&nbsp;</td>
         </tr>
         <tr>
             <td colspan="2">&nbsp;</td>
             <td colspan="6">&nbsp;</td>
         </tr>
         <tr>
             <td colspan="2">&nbsp;</td>
             <td colspan="6">&nbsp;</td>
         </tr>
         <tr>
             <td colspan="2">&nbsp;</td>
             <td colspan="6">&nbsp;</td>
         </tr>
     </table>
 </body>

JS:

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdgzpf.html