html - 表格的滚动条将文本推到左边？

Question

我不明白为什么我的浏览器(最新的 Chrome)一直在我的表格单元格和滚动条(我用红色突出显示)之间添加空间:

当我将表格 HTML 放入 JSFiddle 时，它​​没有有这个额外的空间(https://jsfiddle.net/m0c3twda/1/)。

.table-container{
    margin-left:  auto;
    margin-right:  auto;
    width: 80vw;  /* set the width of the table to 80% of view width */
}

#image-list {
    overflow-y: scroll;
    overflow-x: visible;
    height: 100px;
    display:  block;
    width:  100%;
    margin-top: 20px;
    margin-left:  auto;
    margin-right: auto;
}

#image-list tr{
    display: table-row;
    padding:  0px;
}

#image-list td{
    padding-left:  3px;
    padding-right:  3px;
}

#image-list tr td:first-child{
    text-align: left;
}

#image-list tr td:nth-child(2){
    text-align: center;
}

#image-list tr td:nth-child(3){
    text-align: right;
}

<div class='table-container'>
        <table id='image-list'>
            <tr class="row">
                <td><a class="image-link" href="/index/Chrysanthemum%20-%20Copy.jpg"> Chrysanthemum - Copy.jpg </a></td>
                <td><a class="image-link" href="/index/Chrysanthemum.jpg"> Chrysanthemum.jpg </a></td>
                <td><a class="image-link" href="/index/Desert%20-%20Copy.jpg"> Desert - Copy.jpg </a></td>
            </tr>
            <tr class="row">
                <td><a class="image-link" href="/index/Desert.jpg"> Desert.jpg </a></td>
                <td><a class="image-link" href="/index/Hydrangeas%20-%20Copy.jpg"> Hydrangeas - Copy.jpg </a></td>
                <td><a class="image-link" href="/index/Hydrangeas.jpg"> Hydrangeas.jpg </a></td>
            </tr>

            ...

            <tr class="row">
                <td><a class="image-link" href="/index/test%20%282%29.jpg"> test (2).jpg </a></td>
                <td><a class="image-link" href="/index/test%20%283%29.jpg"> test (3).jpg </a></td>
                <td><a class="image-link" href="/index/test%20%284%29.jpg"> test (4).jpg </a></td>
            </tr>
            <tr class="row">
                <td><a class="image-link" href="/index/Tulips.jpg"> Tulips.jpg </a></td>
            </tr>
      </table>
</div>

https://jsfiddle.net/m0c3twda/1/ -- 注意:JSFiddle 中有更多行，为了简单起见，我只在此处发布了一些行。

我也试过 html {overflow-y: scroll} as suggested here但同样的事情发生了。

出于某种原因，我怀疑它在 .table-container{} CSS 中，除非我完全删除它，它仍然会在第三列和滚动条之间增加空间...

没有Javascript/jQuery等，全是HTML+CSS(虽然是通过Flask生成的)

我可能忽略或没有考虑什么？

Answer 1

所以这里发生的一些事情需要重新考虑； See updated fiddle添加了一些视觉辅助工具。

对于初学者来说，没有理由改变 display ，它是一张 table ，让它成为一张 table 。通过将其更改为 block嵌套的 tr 忘记了它们在上下文中应该是什么，chrome 将应用 <tbody>在你的行和单例 <td> 周围最后总是会导致布局问题，因为如果缺少 colspan，它基本上是一个损坏的标签在测量/布置/绘画时充当带列的有效行。

我们还让容器处理 overflow让border-collapse处理间距的减少作为 display: table 的一个属性而不是定位 td作为 display: block 的 child 如前所述。

无论如何，希望这对您有所帮助。干杯!