Полоса прокрутки таблицы толкает текст влево?

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}, как предложено здесь , но происходит то же самое.

По какой-то причине я подозреваю, что он в .table-container{} css, за исключением того, что если я полностью его уберу, он все равно добавляет пространство между третьим столбцом и полосой прокрутки ...

Там нет Javascript / jQuery и т. Д. Это все HTML + CSS (хотя он генерируется с помощью Flask).

Что я могу упускать из виду или не учитывать?

Answer 1

Итак, у вас здесь происходит несколько вещей, которые необходимо пересмотреть; См. Обновленную скрипку с добавлением некоторых наглядных пособий.

Для начала, нет причин менять display, это таблица, пусть она будет таблицей.Изменяя его на block, вложенные tr теряют след того, кем они должны быть в контексте, и chrome будет применять <tbody> вокруг ваших строк, а одиночный <td> в конце всегда будет вызывать проблемы с разметкой, так как в основном этосломанный тег, если он пропускает colspan, чтобы выступать в качестве действительной строки со столбцами при измерении / расположении / рисовании.

Мы также позволим контейнеру обрабатывать overflow и позволим border-collapse обработать сокращениеинтервал как атрибут display: table вместо нацеливания td как дочернего элемента display: block, как упоминалось ранее.

В любом случае, надеюсь, это поможет.Ура!