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}用作suggested here，但同样的事情也会发生。

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

没有Javascript / jQuery等。所有都是HTML + CSS（尽管它是通过Flask生成的）。

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

Answer 1

因此，您需要重新考虑一些事情； See updated fiddle，并添加了一些视觉辅助工具。

对于初学者来说，没有理由更改display，它是一个表，让它成为一个表。通过将其更改为block，嵌套的tr将失去对它们本应在上下文中的位置的跟踪，chrome将在您的行周围应用<tbody>，最后的单个<td>将始终导致布局问题，因为如果在测量/布置/绘画时缺少colspan来充当带有列的有效行，则它基本上是一个损坏的标签。

我们还让容器处理overflow并让border-collapse处理间距的减小作为display: table的属性，而不是将td定位为{的子元素{1}}。

无论哪种方式，希望对您有所帮助。干杯！

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

1 个答案: