Table border not appearing on later elements when using css webkit animation

Question

I have a horizontally scrolling table on my website that has a width of 300% of the screen. On smaller screen sizes the 's that appear later in the table don't have a border like the rest of them. I have all td elements to have a border and don't understand why they won't appear.

CSS & HTML

#lines {
    width: 100%;
    height: 46px;
    display: block;
    position: fixed;
    top: 29px;
    background-color: none;
}
#lTable {
    height: 46px;
    width: 300%;
    border: 1px solid;
    background-color: white;
    border-collapse: collapse;
}
.lth {
    text-align: center;
    position: relative;
    border: 1px solid;
    font-family: 'Alegreya Sans SC', sans-serif;
    font-size: 1vw;
    background-color: white;
    -webkit-animation-name: move;
    -webkit-animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: left;
    -webkit-animation-timing-function: linear;
}
td {
    text-align: center;
    position: relative;
    border: 1px solid;
    font-family: 'Alegreya Sans SC', sans-serif;
    font-size: 1vw;
    font-weight: 400;
    background-color: white;
    -webkit-animation-name: move;
    -webkit-animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: left;
    -webkit-animation-timing-function: linear;
}
@-webkit-keyframes move {
        0% {
            left: 35%;
        }
        100% {
            left: -100%;
        }
}

<div id="lines">
        <!-- horizontal scrolling table -->
            <table id="lTable">
                <tr>
                    <th class="lth">NFL</th>
                    <th class="lth">Odds to Win Super Bowl</th>
                    <td>KC +600</td>
                    <td>GB +900</td>
                    <td>TB +900</td>
                    <td>BUF +1200</td>
                    <td>BAL +1200</td>
                    <td>LAR +1200</td>
                    <td>SF +1600</td>
                    <td>NO +1800</td>
                    <td>SEA +2200</td>
                    <td>CLE +2500</td>
                    <td>DAL +2500</td>
                    <td>IND +2500</td>
                    <td>MIA +2500</td>
                    <td>TEN +2500</td>
                    <td>LAC +3000</td>
                    <td>NE +3000</td>
                    <td>PIT +3000</td>
                    <td>ARI +4000</td>
                    <td>MIN +4000</td>
                    <td>CAR +5000</td>
                    <td>CHI +5000</td>
                    <td>LV +5000</td>
                    <td>PHI +5000</td>
                    <td>ATL +6600</td>
                    <td>NYG +6600</td>
                    <td>DEN +6600</td>
                    <td>WAS +6600</td>
                    <td>CIN +8000</td>
                    <td>DET +8000</td>
                    <td>HOU +8000</td>
                    <td>NYJ +8000</td>
                    <td>JAX +10000</td>
                </tr>
            </table>
        </div>

Anything helps!

I've tried on several small screen sizes and the borders appear OK. What system are you using that doesn't show the borders? — A Haworth, Feb 24 '21 at 08:20
EDIT: the #lines has position fixed. When the position is fixed, then it doesn't work. — user5789, Feb 24 '21 at 15:47

score 0 · Accepted Answer · edited Feb 25 '21 at 01:12

because the left value of td is 35%, which is outside the width of the table.

I think it won't disappear if you put the animation property on the table instead of td.

#lines {
            width: 100%;
            height: 46px;
            display: block;
            position: fixed;
            top: 29px;
            background-color: none;
        }

        #lTable {
            position: relative;
            height: 46px;
            width: 300%;
            border: 1px solid;
            background-color: white;
            border-collapse: collapse;
            -webkit-animation-name: move;
            -webkit-animation-duration: 10s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-timing-function: linear;
        }

        .lth {
            text-align: center;
            border: 1px solid;
            font-family: 'Alegreya Sans SC', sans-serif;
            font-size: 1vw;
            background-color: white;
        }

        td {
            text-align: center;
            border: 1px solid;
            font-family: 'Alegreya Sans SC', sans-serif;
            font-size: 1vw;
            font-weight: 400;
            background-color: white;
        }

        @-webkit-keyframes move {
            0% {
                left: 105%;
            }

            100% {
                left: -300%;
            }
        }

<div id="lines">
        <table id="lTable">
            <tr>
                <th class="lth">NFL</th>
                <th class="lth">Odds to Win Super Bowl</th>
                <td>KC +600</td>
                <td>GB +900</td>
                <td>TB +900</td>
                <td>BUF +1200</td>
                <td>BAL +1200</td>
                <td>LAR +1200</td>
                <td>SF +1600</td>
                <td>NO +1800</td>
                <td>SEA +2200</td>
                <td>CLE +2500</td>
                <td>DAL +2500</td>
                <td>IND +2500</td>
                <td>MIA +2500</td>
                <td>TEN +2500</td>
                <td>LAC +3000</td>
                <td>NE +3000</td>
                <td>PIT +3000</td>
                <td>ARI +4000</td>
                <td>MIN +4000</td>
                <td>CAR +5000</td>
                <td>CHI +5000</td>
                <td>LV +5000</td>
                <td>PHI +5000</td>
                <td>ATL +6600</td>
                <td>NYG +6600</td>
                <td>DEN +6600</td>
                <td>WAS +6600</td>
                <td>CIN +8000</td>
                <td>DET +8000</td>
                <td>HOU +8000</td>
                <td>NYJ +8000</td>
                <td>JAX +10000</td>
            </tr>
        </table>
    </div>

Table border not appearing on later elements when using css webkit animation

1 Answers1