为什么这个水平可滚动表格在移动视图中会在表格右侧显示额外的空间？

问题描述 投票：0回答：1

我似乎无法理解为什么在缩小视口时，这个响应式表格会在其右侧添加额外的空白。我尝试使用开发工具来找出正在执行的操作，但我没有运气。下面是一个代码片段，如果视口足够小，应该可以显示问题。

<!doctype html>
<html lang="en" data-theme="light">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
    <title>Test Site</title>
</head>

<body>
    <figure>
        <table role="grid">
            <thead>
                <tr>
                    <th scope="col" data-tooltip="Position" data-placement="right" style="width: 2rem;"><span class="material-symbols-outlined" style="vertical-align: middle;">leaderboard</span></th>
                    <th scope="col" data-tooltip="Team Name" data-placement="right" class="ladder-header-team-name">Team</th>
                    <th scope="col" data-tooltip="Points" data-placement="right">PTS</th>
                    <th scope="col" data-tooltip="Matches Played" data-placement="right">MP</th>
                    <th scope="col" data-tooltip="Wins" data-placement="right" style="background-color: #77DD77;">W</th>
                    <th scope="col" data-tooltip="Draws" data-placement="right" style="background-color: #FDFD96;">D</th>
                    <th scope="col" data-tooltip="Losses" data-placement="right" style="background-color: #FF6961;">L</th>
                    <th scope="col" data-tooltip="Goals For" data-placement="right">GF</th>
                    <th scope="col" data-tooltip="Goals Against" data-placement="left">GA</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row" class="ladder-position">1</th>
                    <td class="ladder-team-name">Team 1</td>
                    <td class="ladder-points">19</td>
                    <td class="ladder-matches-played">9</td>
                    <td class="ladder-wins">6</td>
                    <td class="ladder-draws">1</td>
                    <td class="ladder-losses">2</td>
                    <td class="ladder-goals-for">39</td>
                    <td class="ladder-goals-against">24</td>
                </tr>
                <tr>
                    <th scope="row" class="ladder-position">2</th>
                    <td class="ladder-team-name">Team 2</td>
                    <td class="ladder-points">17</td>
                    <td class="ladder-matches-played">9</td>
                    <td class="ladder-wins">5</td>
                    <td class="ladder-draws">2</td>
                    <td class="ladder-losses">2</td>
                    <td class="ladder-goals-for">42</td>
                    <td class="ladder-goals-against">30</td>
                </tr>
                <tr>
                    <th scope="row" class="ladder-position">3</th>
                    <td class="ladder-team-name">Team 3</td>
                    <td class="ladder-points">14</td>
                    <td class="ladder-matches-played">9</td>
                    <td class="ladder-wins">4</td>
                    <td class="ladder-draws">2</td>
                    <td class="ladder-losses">3</td>
                    <td class="ladder-goals-for">33</td>
                    <td class="ladder-goals-against">29</td>
                </tr>
                <tr>
                    <th scope="row" class="ladder-position">4</th>
                    <td class="ladder-team-name">Team 4</td>
                    <td class="ladder-points">13</td>
                    <td class="ladder-matches-played">9</td>
                    <td class="ladder-wins">4</td>
                    <td class="ladder-draws">1</td>
                    <td class="ladder-losses">4</td>
                    <td class="ladder-goals-for">29</td>
                    <td class="ladder-goals-against">37</td>
                </tr>
                <tr>
                    <th scope="row" class="ladder-position">5</th>
                    <td class="ladder-team-name">Team 5</td>
                    <td class="ladder-points">12</td>
                    <td class="ladder-matches-played">9</td>
                    <td class="ladder-wins">4</td>
                    <td class="ladder-draws">0</td>
                    <td class="ladder-losses">5</td>
                    <td class="ladder-goals-for">22</td>
                    <td class="ladder-goals-against">41</td>
                </tr>
            </tbody>
        </table>
    </figure>
</body>

</html>

html css responsive-design
1个回答
0
投票

这是因为

--spacing: 1rem
。如果它更大，它会在移动设备上水平填充。要解决此问题，只需在 
overflow: hidden
中添加 
table
，如下所示：

<!doctype html>
<html lang="en" data-theme="light">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
    <title>Test Site</title>
</head>

<body>
    <figure>
        <table role="grid" style="overflow:hidden">
            <thead>
                <tr>
                    <th scope="col" data-tooltip="Position" data-placement="right" style="width: 2rem;"><span class="material-symbols-outlined" style="vertical-align: middle;">leaderboard</span></th>
                    <th scope="col" data-tooltip="Team Name" data-placement="right" class="ladder-header-team-name">Team</th>
                    <th scope="col" data-tooltip="Points" data-placement="right">PTS</th>
                    <th scope="col" data-tooltip="Matches Played" data-placement="right">MP</th>
                    <th scope="col" data-tooltip="Wins" data-placement="right" style="background-color: #77DD77;">W</th>
                    <th scope="col" data-tooltip="Draws" data-placement="right" style="background-color: #FDFD96;">D</th>
                    <th scope="col" data-tooltip="Losses" data-placement="right" style="background-color: #FF6961;">L</th>
                    <th scope="col" data-tooltip="Goals For" data-placement="right">GF</th>
                    <th scope="col" data-tooltip="Goals Against" data-placement="left">GA</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row" class="ladder-position">1</th>
                    <td class="ladder-team-name">Team 1</td>
                    <td class="ladder-points">19</td>
                    <td class="ladder-matches-played">9</td>
                    <td class="ladder-wins">6</td>
                    <td class="ladder-draws">1</td>
                    <td class="ladder-losses">2</td>
                    <td class="ladder-goals-for">39</td>
                    <td class="ladder-goals-against">24</td>
                </tr>
                <tr>
                    <th scope="row" class="ladder-position">2</th>
                    <td class="ladder-team-name">Team 2</td>
                    <td class="ladder-points">17</td>
                    <td class="ladder-matches-played">9</td>
                    <td class="ladder-wins">5</td>
                    <td class="ladder-draws">2</td>
                    <td class="ladder-losses">2</td>
                    <td class="ladder-goals-for">42</td>
                    <td class="ladder-goals-against">30</td>
                </tr>
                <tr>
                    <th scope="row" class="ladder-position">3</th>
                    <td class="ladder-team-name">Team 3</td>
                    <td class="ladder-points">14</td>
                    <td class="ladder-matches-played">9</td>
                    <td class="ladder-wins">4</td>
                    <td class="ladder-draws">2</td>
                    <td class="ladder-losses">3</td>
                    <td class="ladder-goals-for">33</td>
                    <td class="ladder-goals-against">29</td>
                </tr>
                <tr>
                    <th scope="row" class="ladder-position">4</th>
                    <td class="ladder-team-name">Team 4</td>
                    <td class="ladder-points">13</td>
                    <td class="ladder-matches-played">9</td>
                    <td class="ladder-wins">4</td>
                    <td class="ladder-draws">1</td>
                    <td class="ladder-losses">4</td>
                    <td class="ladder-goals-for">29</td>
                    <td class="ladder-goals-against">37</td>
                </tr>
                <tr>
                    <th scope="row" class="ladder-position">5</th>
                    <td class="ladder-team-name">Team 5</td>
                    <td class="ladder-points">12</td>
                    <td class="ladder-matches-played">9</td>
                    <td class="ladder-wins">4</td>
                    <td class="ladder-draws">0</td>
                    <td class="ladder-losses">5</td>
                    <td class="ladder-goals-for">22</td>
                    <td class="ladder-goals-against">41</td>
                </tr>
            </tbody>
        </table>
    </figure>
</body>

</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.