美文网首页
table的一点坑

table的一点坑

作者: povicky | 来源:发表于2016-11-30 01:04 被阅读0次

    最近公司做了一个数据可视化的项目,里面有些用到了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的宽度无效

    相关文章

      网友评论

          本文标题:table的一点坑

          本文链接:https://www.haomeiwen.com/subject/gwlipttx.html