In my react project, I’m using html table as shown. The issue is that the width of the table is more than the available screen on mobile devices in portrait mode, so they’re scrollable to right. As shown:
I don’t want the table to scroll, instead I want it to be resized smaller i.e zoomed out in this scenario.
I have tried removing the padding and using media queries by giving id to each column and then trying media queries on them. I have also removed the 80px width yet no effect. Something like:
[id="#first"] {
width: 20%;
}
[id="#sec"] {
width: 40%;
}
[id="#third"] {
width: 40%;
}
The code for the table is as follows:
<div>
<table style="border: 1px solid white;color: white;border-spacing: 0px !important;">
<tr>
<th style="border: 1px solid white;padding: 20px;text-align: center;">TITLE</th>
<th style="border: 1px solid white;padding: 20px;text-align: center;">ICON</th>
<th style="border: 1px solid white;padding: 20px;text-align: center;">ACTION</th>
</tr>
<tr>
<td style="border: 1px solid white;padding: 10px;text-align: center;"><b>SPIN</b></td>
<td style="border: 1px solid white;padding: 10px;text-align: center;"><img src="./../images/help/spinbutton.png" alt="Spin Button" width="80px"></td>
<td style="border: 1px solid white;padding: 10px;text-align: center;">Initiates a reel spin.</td>
</tr>
<tr>
<td style="border: 1px solid white;padding: 10px;text-align: center;"><b>SPIN STOP</b></td>
<td style="border: 1px solid white;padding: 10px;text-align: center;"><img src="./../images/help/spinstopbutton.png" alt="Spin Stop Button" width="80px"></td>
<td style="border: 1px solid white;padding: 10px;text-align: center;">Stops the reel spin immediately. (wherever applicable)</td>
</tr>
<tr>
<td style="border: 1px solid white;padding: 10px;text-align: center;"><b>AUTOPLAY</b></td>
<td style="border: 1px solid white;padding: 10px;text-align: center;"><img src="./../images/help/autoplaybutton.png" alt="Autoplay" width="80px"></td>
<td style="border: 1px solid white;padding: 10px;text-align: center;">Displays the Autoplay settings screen to show all available options to initiate multiple spins
simultaneously (wherever applicable).</td>
</tr>
<tr>
<td style="border: 1px solid white;padding: 10px;text-align: center;"><b>AUTOPLAY STOP</b></td>
<td style="border: 1px solid white;padding: 10px;text-align: center;"><img src="./../images/help/autoplaystopbutton.png" alt="Autoplay Stop" width="80px"></td>
<td style="border: 1px solid white;padding: 10px;text-align: center;">Press to stop Autoplay session manually (wherever applicable).</td>
</tr>
<tr>
<td style="border: 1px solid white;padding: 10px;text-align: center;"><b>BET</b></td>
<td style="border: 1px solid white;padding: 10px;text-align: center;"><img src="./../images/help/bet1.png" alt="Bet button 1" width="80px"><img src="./../images/help/bet2.png"
alt="bet button 2" width="80px"></td>
<td style="border: 1px solid white;padding: 10px;text-align: center;">Displays the bet options for the player to select the level of their Bet.</td>
</tr>
<tr>
<td style="border: 1px solid white;padding: 10px;text-align: center;"><b>MENU</b></td>
<td style="border: 1px solid white;padding: 10px;text-align: center;"><img src="./../images/help/menubutton.png" alt="menu button" width="80px"></td>
<td style="border: 1px solid white;padding: 10px;text-align: center;">Displays a settings screen with the following options to choose: Bet, Info, Help and Max button
</td>
</tr>
<tr>
<td style="border: 1px solid white;padding: 10px;text-align: center;"><b>AUDIO</b></td>
<td style="border: 1px solid white;padding: 10px;text-align: center;"><img src="./../images/help/audiobutton1.png" alt="audio button 1" width="80px"><img
src="./../images/help/audiobutton2.png" alt="audio button 2" width="80px"></td>
<td style="border: 1px solid white;padding: 10px;text-align: center;">Choose to enable/disable the sound.</td>
</tr>
<tr>
<td style="border: 1px solid white;padding: 10px;text-align: center;"><b>PAYTABLE</b></td>
<td style="border: 1px solid white;padding: 10px;text-align: center;"><img src="./../images/help/paytablebutton.png" alt="paytable button" width="80px"></td>
<td style="border: 1px solid white;padding: 10px;text-align: center;">Choose to view the Paytable and feature descriptions for the game.</td>
</tr>
<tr>
<td style="border: 1px solid white;padding: 10px;text-align: center;"><b>BET SETTING</b></td>
<td style="border: 1px solid white;padding: 10px;text-align: center;"><img src="./../images/help/betsettingbutton.png" alt="bet setting button" width="80px"></td>
<td style="border: 1px solid white;padding: 10px;text-align: center;">Displays the Bet per line Options available for the player to select and change the level of
their bet.</td>
</tr>
<tr>
<td style="border: 1px solid white;padding: 10px;text-align: center;"><b>HELP</b></td>
<td style="border: 1px solid white;padding: 10px;text-align: center;"><img src="./../images/help/helpbutton.png" alt="help button" width="80px"></td>
<td style="border: 1px solid white;padding: 10px;text-align: center;">Displays the detailed information about the game.</td>
</tr>
<tr>
<td style="border: 1px solid white;padding: 10px;text-align: center;"><b>SETTING CLOSE</b></td>
<td style="border: 1px solid white;padding: 10px;text-align: center;"><img src="./../images/help/settingclosebutton.png" alt="setting close button" width="80px"></td>
<td style="border: 1px solid white;padding: 10px;text-align: center;">Close the window.</td>
</tr>
<tr>
<td style="border: 1px solid white;padding: 30px;text-align: center;"><b>MAX</b></td>
<td style="border: 1px solid white;padding: 30px;text-align: center;"><img src="./../images/mobile/en/maxbetbutton.png" alt="max bet button" width="80px"></td>
<td style="border: 1px solid white;padding: 30px;text-align: center;">Displays the maximum bet.</td>
</tr>
<tr>
<td style="border: 1px solid white;padding: 10px;text-align: center;"><b>ARROWS</b></td>
<td style="border: 1px solid white;padding: 10px;text-align: center;"><img src="./../images/help/arrowbutton1.png" alt="arrow button 1" width="80px"><img
src="./../images/help/arrowbutton2.png" alt="arrow button 2" width="80px"></td>
<td style="border: 1px solid white;padding: 10px;text-align: center;">Select the current option.</td>
</tr>
<tr>
<td style="border: 1px solid white;padding: 30px;text-align: center;"><b>START</b></td>
<td style="border: 1px solid white;padding: 30px;text-align: center;"><img src="./../images/mobile/en/startbutton.png" alt="start button" width="80px"></td>
<td style="border: 1px solid white;padding: 30px;text-align: center;">To start the Autoplay session.</td>
</tr>
</table>
</div>
2
Answers
Try to fix width of table’s container.
Try to resize your table instead of columns in your media query!