[英]Why do I have horizontal scroll when I assign column width equal to table width divide by number of columns?
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 .我有一个
fixed
布局表,我想在 Javascript 中明确给出所有列的宽度,并让它们在没有水平滚动条的情况下拉伸屏幕的宽度。
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.我知道有一些方法可以做到这一点,例如具有 colgroup 的自动宽度或具有自动表本身。 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.
我需要它们与示例中的一样,只是我可以修改 javascript 中每列的宽度。 So, how do I have the columns in the
fixed
table take the entire width without horizontal scrollbar appearing?那么,如何让
fixed
表中的列占据整个宽度而不出现水平滚动条? 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.
我正在使用一些第三方 Grid 控件,这会在运行时导致“固定”表格布局,并且 Grid 不允许我设置除像素以外的列宽,我需要让 Grid 占据整个屏幕。 This is just the simplified version of the problem I'm depicting.
这只是我所描述问题的简化版本。
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-我认为这是因为您在
td
& th
使用了默认margin
和1px
边框,这两个导致了scrollbar
,所以我删除了默认margin
并使用box-shadow
替换了border
,看看它是否适合您-
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>
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.如果您尝试在 chrome 中运行相同的代码并检查,您会注意到每边的填充为 1 像素,这使宽度总共增加了 2 像素。
This is making your every td of the total width+padding which will result in more width than your window's inner width.这使您的总宽度+填充的每个 td 都会导致宽度大于窗口的内部宽度。
Also when width/3 is some x.57667 number it will round your width and will add that pixel to the total width.此外,当 width/3 是某个 x.57667 数字时,它会将您的宽度四舍五入并将该像素添加到总宽度中。 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;您可以使用
overflow:hidden
属性不滚动,也可以将box-sizing: border-box
赋予body标签;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.