表格的滚动条将文本向左推？

【问题标题】：Table's scrollbar pushing text to left?表格的滚动条将文本向左推？
【发布时间】：2019-04-04 05:49:35
【问题描述】：

我不明白为什么我的浏览器（最新的 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} 和 suggested here 但同样的事情发生了。

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

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

我可能忽略或不考虑什么？

【问题讨论】：

• class="row" 是否在 标签上引用 Bootstrap
• 如果你拉伸 JSFiddle，它最终会有那个空白。看起来这就是文本结束的地方，这就是 tbody 的宽度
• @JakeG - 不，我没有使用 Bootstrap。我最初为 CSS 设置了该类，但从未使用过它。我从tr 中删除了class="row"，并从a 标签中删除了class="image-link"，看看会发生什么，我得到了相同的行为。