0

I have a table created in bootstrap that maintains size nicely on laptops, monitors and tablets, but on a phone the table is too big. Is there any solution how to make the table smaller? width on % and px does not work :/.

Photo:

<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>
David Thomas
  • 249,100
  • 51
  • 377
  • 410
kamilek020
  • 1
  • 2

1 Answers1

1

You can use an iframe generated using javascript. Since you can adjust the width & height of iframe, it will show the scrollbars if the table exceeds the viewport.

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);

You can follow this question if you want to explore more on using custom html in an iframe, Creating an iframe with given HTML dynamically

Jayanika Chandrapriya
  • 103
  • 1
  • 7
  • The table will have different times, I have to create the whole table in the html variable, yes? There is no way to use pure bootstrap to create a responsive table? – kamilek020 Jul 15 '22 at 06:22
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 16 '22 at 00:55