类似Excel冻结标题的效果

最新推荐文章于 2024-09-16 11:00:00 发布

最新推荐文章于 2024-09-16 11:00:00 发布 · 214 阅读

文章标签：

#Excel #Google #浏览器 #HTML

J2EE 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种方法，用于使两个表格的列宽保持一致，并探讨了如何让包含表格的div元素高度自适应不同分辨率的浏览器窗口。通过JavaScript实现了表格列宽的实时同步调整。

在google里面找到的,贴上去就可以用,不过div包住的高度如何自适应任何分辨率下的浏览器还不知道怎么弄.

  <html>   
          <body>   
                  <table   id="table1"   border="1">   
                          <tr>   
                                  <td>a</td>   
                                  <td>bbb</td>   
                                  <td>ccccccc</td>   
                                  <td>ddd</td>   
                                  <td>ee</td>   
                          </tr>   
                  </table>   
                  <div   style="width:250;height:100px;overflow:auto">   
                          <table   id="table2"   border=1>   
                                  <tr>   
                                          <td>111</td>   
                                          <td>222</td>   
                                          <td>333</td>   
                                          <td>444</td>   
                                          <td>555</td>   
                                  </tr>   
                                  <tr>   
                                          <td>111</td>   
                                          <td>222</td>   
                                          <td>333</td>   
                                          <td>444</td>   
                                          <td>555</td>   
                                  </tr>   
                                  <tr>   
                                          <td>111</td>   
                                          <td>222</td>   
                                          <td>333</td>   
                                          <td>444</td>   
                                          <td>555</td>   
                                  </tr>   
                                  <tr>   
                                          <td>111</td>   
                                          <td>222</td>   
                                          <td>333</td>   
                                          <td>444</td>   
                                          <td>555</td>   
                                  </tr>   
                                  <tr>   
                                          <td>111</td>   
                                          <td>222</td>   
                                          <td>333</td>   
                                          <td>444</td>   
                                          <td>555</td>   
                                  </tr>   
                                  <tr>   
                                          <td>111</td>   
                                          <td>222</td>   
                                          <td>333</td>   
                                          <td>444</td>   
                                          <td>555</td>   
                                  </tr>   
                                  <tr>   
                                          <td>111</td>   
                                          <td>222</td>   
                                          <td>333</td>   
                                          <td>444</td>   
                                          <td>555</td>   
                                  </tr>   
                                  <tr>   
                                          <td>111</td>   
                                          <td>222</td>   
                                          <td>333</td>   
                                          <td>444</td>   
                                          <td>555</td>   
                                  </tr>   
                          </table>   
                  </div>   
  <Script>   
  function   init(){   
  var   tr1   =   table1.firstChild.firstChild;   
  var   tr2   =   table2.firstChild.firstChild;   
  var   cells1   =   tr1.children;   
  var   cells2   =   tr2.children;   
  for(var   i=0;i<cells1.length;i++){   
  var   maxWidth   =   Math.max(cells1[i].offsetWidth,cells2[i].offsetWidth);   
  cells1[i].style.width   =   maxWidth;   
  cells2[i].style.width   =   maxWidth;   
  }   
  }   
  init();   
  </Script>   
          </body>   
  </html>