我似乎不明白为什么在缩小视区时，这个响应表在它的右侧添加了额外的空格.我试着使用开发工具来弄清楚是什么在做这件事，但我一直没有运气.下面是一个代码片段，如果视区足够小，它应该会显示问题.
<!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>