My Bootstrap table design looks great on larger screens like laptops, monitors, and tablets, but the size isn't optimized for phones. I've tried adjusting the width in percentages and pixels, but it's not working out. Any suggestions on how to make the table smaller for mobile devices?
Photo:
https://i.sstatic.net/Qhnbj.jpg
<table class="table">
<thead>
<tr>
<th scope="col">Course No.</th>
<th scope="col"></th>
<th scope="col">1</th>
<th scope="col">2</th>
<th scope="col">3</th>
<th scope="col">4</th>
<th scope="col">5</th>
<th scope="col">6</th>
<th scope="col">7</th>
<th scope="col">8</th>
<th scope="col">9</th>
<th scope="col">10</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Course Designations</th>
<td></td>
<td>E</td>
<td>S</td>
<td>D</td>
<td>S</td>
<td>E 7</td>
<td>E 7</td>
<td>E</td>
<td>S</td>
<td>E 7</td>
<td>E 7</td>
</tr>
<tr>
<th scope="row">Kołobrzeg Railway Station</th>
<td>0</td>
<td>4:45</td>
<td>5:45</td>
<td>6:45</td>
<td>7:45</td>
<td>8:45</td>
<td>10:45</td>
<td>12:55</td>
<td>14:45</td>
<td>15:20</td>
<td>17:15</td>
</tr>
<tr>
<th scope="row">Kołobrzeg Grochow. </th>
<td>0</td>
<td>4:45</td>
<td>5:45</td>
<td>6:45</td>
<td>7:45</td>
<td>8:45</td>
<td>10:45</td>
<td>12:55</td>
<td>14:45</td>
<td>15:20</td>
<td>17:15</td>
</tr>
// Additional rows go here...
</table>