Why do I have horizontal scroll when I assign column width equal to table width divide by number of columns?

Question

I have a fixed layout table and I want to give all the column width explicitly in Javascript and have them stretch the width of the screen without having the horizontal scrollbar .

I have depicted the issue in the following fiddle :

 var tables = document.getElementsByTagName("table"); var cols = tables[0].querySelectorAll('colgroup col'); console.log(window.innerWidth); for(let index = 0; index < cols.length; index++){ cols[index].style.width = window.innerWidth/3 + "px"; }

 table{ border-collapse: collapse; table-layout:fixed; width:100%; overflow:scroll; } table td, th{ border: 1px solid black; border-spacing:collapse; }

 <div style="overflow-x:auto;width:100%"> <table> <colgroup> <col style="background-color:#FFF9C4;"> <col style="background-color:yellow;"> <col style="background-color:green;"> </colgroup> <thead> <tr> <th>Name</th> <th>ID</th> <th>Favorite Color</th> </tr> </thead> <tbody> <tr> <td>Jim</td> <td>00001</td> <td>Blue</td> </tr> <tr> <td>Sue</td> <td>00002</td> <td>Red</td> </tr> <tr> <td>Barb</td> <td>00003</td> <td>Green</td> </tr> </tbody> </table> </div>

I know there are ways to do it eg having auto width of the colgroup or having auto table itself. But I cannot change these parameters. I need them to be as in the example except that I can modify the width of each columns in javascript. So, how do I have the columns in the fixed table take the entire width without horizontal scrollbar appearing? I want to know why the scroll appears in the first place?

Why the sum of column width is not equal to table width itself?

Any help is appreciated.

edit

I cannot modify the table layout to other than "fixed" and I have to give explicit column width. I'm using some third party Grid control which results in "fixed" table layout at runtime and the Grid does not let me set column width other than in pixel and I need to have the Grid take up the entire screen. This is just the simplified version of the problem I'm depicting.

Answer 1

I think it's because of the default margin and the 1px border you used in td & th , these 2 caused the scrollbar , so I removed the default margin and used box-shadow to replace the border , see if it works for you-

Demo

 var tables = document.getElementsByTagName("table"); var cols = tables[0].querySelectorAll('colgroup col'); console.log(window.innerWidth); for(let index = 0; index < cols.length; index++){ cols[index].style.width = window.innerWidth/3 + "px"; }

 * { margin: 0 } table{ border-collapse: collapse; table-layout:fixed; width:100%; overflow:scroll; } table td, th { padding: 3px 5px; box-shadow: inset 0 0 0 .5px black; border-spacing:collapse; }

 <div style="overflow-x:auto;width:100%"> <table> <colgroup> <col style="background-color:#FFF9C4;"> <col style="background-color:yellow;"> <col style="background-color:green;"> </colgroup> <thead> <tr> <th>Name</th> <th>ID</th> <th>Favorite Color</th> </tr> </thead> <tbody> <tr> <td>Jim</td> <td>00001</td> <td>Blue</td> </tr> <tr> <td>Sue</td> <td>00002</td> <td>Red</td> </tr> <tr> <td>Barb</td> <td>00003</td> <td>Green</td> </tr> </tbody> </table> </div>

Answer 2

If you try to run the same code in chrome and inspect, you will notice that you are getting padding of 1 px for each side, which adds a total of 2px into your width.

This is making your every td of the total width+padding which will result in more width than your window's inner width.

Also when width/3 is some x.57667 number it will round your width and will add that pixel to the total width. which will end up in a scroll.

You can impose no scroll by using overflow:hidden property or you can give box-sizing: border-box to body tag;