Table 使用 css webkit 动画时边框不会出现在后面的元素上

Question

我的网站上有一个水平滚动条 table，其宽度为屏幕的 300%。在较小的屏幕尺寸上，稍后出现在 table 中的 ' 没有像其余部分那样的边框。我所有的 td 元素都有边框，但不明白为什么它们不会出现。

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>

任何帮助！

Answer 1

因为td左边的值为35%，超出了table的宽度。

我想如果你把动画属性放在table而不是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 使用 css webkit 动画时边框不会出现在后面的元素上

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

html

css

border

webkit-animation