CODEWITHSUNDEEP
htmlcsshtml-table
BruceWayne
BruceWayne

Reputation: 23283

Table's scrollbar pushing text to left?

I can't figure out why my browser (latest Chrome) keeps adding space between my table cells and the scrollbar (I highlighted in red):

enter image description here

When I put my table HTML in JSFiddle, it does not have this extra space (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/ -- note: there are more rows in the JSFiddle, I just posted a few here for simplicity.

I've also tried html {overflow-y: scroll} as suggested here but same thing happens.

For some reason I suspect it's in the .table-container{} css, except if I remove that completely, it still adds space between the third column and the scrollbar...

There's no Javascript/jQuery, etc. It's all HTML + CSS (although it's generated via Flask).

What might I be overlooking, or not considering?

Upvotes: 3

Views: 529

Answers (1)

Chris W.
Chris W.

Reputation: 23290

So you've got a few things going on here that would need reconsidered; See updated fiddle with some visual aids added.

For starters, there's no reason to change the display, it's a table, let it be a table. By changing it to block the nested tr's lose track of what they're supposed to be in context and chrome will apply a <tbody> around your rows and the single <td> at the end will always cause layout issues since it's basically a broken tag if it's missing a colspan to act as a valid row with columns when measured/arranged/painting.

We also let the container handle the overflow and let border-collapse handle the reduction of spacing as an attribute of display: table instead of targeting td as a child of a display: block as mentioned before.

Either way, hope this helps. Cheers!

Upvotes: 1

Related Questions