Issue
I can't seem to understand why when making the viewport smaller, this responsive table is adding extra whitespace on the right side of it. I've tried using the dev tools to figure out what is doing it but i've had no luck. Below is a code snippet that should show the problem provided the viewport is small enough.
<!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>Solution
It's because of the --spacing: 1rem. If it would be larger it would fill horizontally on mobile. To fix this, just add an overflow: hidden to the table, like so:
<!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>Answered By - iorgv
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.