如何將桌子縮小到手機大小

Question

我在 bootstrap 中創建了一張桌子，可以很好地在筆記本電腦、顯示器和平板電腦上保持尺寸，但在手機上，桌子太大了。 有沒有辦法讓桌子變小？ % 和 px 上的寬度不起作用：/。

照片：

 <table class="table"> <thead> <tr> <th scope="col">Nr. Kursu</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">Oznaczenia kursów</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 Kolejowa</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> <tr> <th scope="row">Czernin</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">Dygowo</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">Pyszka</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">Jazy</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">Wrzosowo</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">Łykowo</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">Syrkowice</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">Brzeźno</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">Karlino UM</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">Redlino</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">Białogard PKP przyj.</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> </tbody> </table>

Answer 1

您可以使用使用 javascript 生成的 iframe。 由於您可以調整 iframe 的寬度和高度，因此如果表格超出視口，它將顯示滾動條。

 var iframe = document.createElement('iframe'); var html = '<table class="table"> <thead> <tr> <th scope="col">Nr. Kursu</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">Oznaczenia kursów</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 Kolejowa</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> <tr> <th scope="row">Czernin</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">Dygowo</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">Pyszka</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">Jazy</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">Wrzosowo</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">Łykowo</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">Syrkowice</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">Brzeźno</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">Karlino UM</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">Redlino</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">Białogard PKP przyj.</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> </tbody></table>'; iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(html); iframe.width = '100%'; iframe.height = '450px'; iframe.frameBorder = '0'; document.body.appendChild(iframe);

如果您想了解更多關於在 iframe 中使用自定義 html 的信息，可以關注這個問題， Creating an iframe with given HTML dynamic