table的一点坑

最近公司做了一个数据可视化的项目,里面有些用到了table,以前基础没打牢,所以遇到了一些杂七杂八的问题,以下是我遇到的几个坑,以此警戒:
1.table默认是display:table,这样子的话,如果列数比较少的话,td会默认去撑开整行,但之前我用了zui插件,里面刚好把display变为block,那个时候死活查不出为什么撑不开整个表格,最后才发现是这个原因。
2.两个table,然后要保持列宽相同(选项卡的table 要记得判断是否display=block,不然宽度获取不到,会为负数)

  <table id="tab1" border="1">
     <tr>
          <td>1</td>
          <td >2</td>
          <td >3</td>
      </tr>
</table>

<table>
        <tr>
              <td>111111111111111111111111111111</td>
               <td>2</td>
              <td>3</td>
        </tr>
    <tr>
              <td>4</td>
             <td>5</td>
             <td>6</td>
       </tr>
    <tr>
            <td>7</td>
           <td>8</td>
           <td>9</td>
      </tr>
     <script>
            $(function(){
                var tab1_width = $("#tab1 tr td").length;
                for(i=0;i<tab1_width;i++)
        {
           $("#tab1 tr td").eq(i).width($("#tab2 tr:first td").eq(i).width());
           console.log($("#tab2 tr:first td").eq(i).width());
        }
            })
    </script>
</table>

3.表头固定
——暂时还在调bug,发现火狐跟IE设置td的宽度无效

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容