Question

相反，对每个表使用CSS宽度，我使用javascript自动将表格作为单元格内的文本数量。但是当滚动水平滚动条时，它还会在桌子的最右侧留下白色空间（绿色空间）。哪个代码正在制作这个空白区域以及删除这个空格的好方法是什么？

参见示例：http://codepen.io/anon/pen/wKqwqR（我的屏幕尺寸：1366 * 768）

HTML：

<div class="table">
  <table>
<tr>
    <th>Number</th>
    <th>INFO----1</th>
    <th>INFO----2</th>      
    <th>Digits</th>
</tr>
<tr>
    <td>1</td>
    <td>What is google? - Computer Hope 
www.computerhope.com/jargon/g/google.htm
Originally known as BackRub, Google is a search engine that started development in 1996 by Sergey Brin and <br/>
Larry Page as a research project at Stanford University.
What is Google (the company)? - Definition from WhatIs.com 
</td>
    <td>What is google? - Computer Hope 
www.computerhope.com/jargon/g/google.htm
Originally known as BackRub, Google is a search engine that started development in 1996 by Sergey Brin and <br/>
Larry Page as a research project at Stanford University.
What is Google (the company)? - Definition from WhatIs.com 
</td>       
    <td>94</td>
</tr>
<tr>
    <td>2</td>
    <td>What is google? - Computer Hope 
www.computerhope.com/jargon/g/google.htm
Originally known as BackRub, Google is a search engine that started development in 1996 by Sergey Brin and <br/>
Larry Page as a research project at Stanford University.
What is Google (the company)? - Definition from WhatIs.com 
</td>
    <td>What is google? - Computer Hope 
www.computerhope.com/jargon/g/google.htm
Originally known as BackRub, Google is a search engine that started development in 1996 by Sergey Brin and <br/>
Larry Page as a research project at Stanford University.
What is Google (the company)? - Definition from WhatIs.com 
</td>       
    <td>80</td>
</tr>
<tr>
    <td>3</td>
    <td>What is google? - Computer Hope 
www.computerhope.com/jargon/g/google.htm
Originally known as BackRub, Google is a search engine that started development in 1996 by Sergey Brin and <br/>
Larry Page as a research project at Stanford University.
What is Google (the company)? - Definition from WhatIs.com 
</td>
    <td>What is google? - Computer Hope 
www.computerhope.com/jargon/g/google.htm
Originally known as BackRub, Google is a search engine that started development in 1996 by Sergey Brin and <br/>
Larry Page as a research project at Stanford University.
What is Google (the company)? - Definition from WhatIs.com 
</td>       
    <td>67</td>
</tr>
</table>
</div>

CSS：

.table{ background:red; overflow-x:auto; }
table{ background:#aaffaa; border-collapse:collapse; display:block; }
th, td { border:1px solid #666; padding:10px; }

使用Javascript：

var i=0,row,table=document.getElementsByTagName('table')[0],tabwid=table.offsetWidth;

while(row=table.rows[i++])
{var hei=row.offsetHeight;
 while(tabwid<4000)
 {tabwid+=500;table.style.width=tabwid+'px';
  if(row.offsetHeight==hei)
  {table.style.width=tabwid-500+'px';break;}
 }
}

编辑：我发现可见表格和额外的空格（绿色空间）也是其中的一部分。

Answer 1

似乎可以在JS中使用以下更改

我添加了一个windowWidth变量，以便获得每个浏览器窗口的宽度。然后，不像以前那样检查4000，而是检查浏览器窗口大小。

  var i=0,row,table=document.getElementsByTagName('table')

    var windowWidth =  window.innerWidth;   

    [0],tabwid=table.offsetWidth;

     while(row=table.rows[i++])
     {var hei=row.offsetHeight;
         while(tabwid<windowWidth)
           {tabwid+=500;table.style.width=tabwid+'px';
             if(row.offsetHeight==hei)
           {table.style.width=tabwid-500+'px';break;}
        }
    }

使用javascript width

1 个答案: