使用javascript宽度时表中的额外空间

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;}
        }
    }