[HTML/CSS] Tabel

[TwingyTwingy]

Hallo,

Voor een organisatie ben ik bezig een website in elkaar te zetten. Ik loop echter bij een tabel tegen mijn kennisbeperkingen aan en hoop dat jullie mij kunnen helpen. Het gaat om de website van een buurtbusorganisatie. Daarop wil ik (in tabel) een dienstregeling plaatsen. Die tabel heeft alleen twee problemen die ik graag opgelost zie. Ik wil de eerste kolom van de tabel 'vastzetten' zodat die op telefoon ook goed leesbaar blijft en ik wil de maximale breedte verkleinen (hij loopt nu de pagina over op de PC). Ik heb wel e.e.a. opgezocht op internet, maar ik krijg het niet goed in mijn tabel. Het betreft overigens de tabel op: http://stadsbuurtbuskampen.nl/dienstregeling/

Alvast heel erg bedankt voor het helpen!

Dit is de code:

<style type="text/css">
.tg {border-collapse:collapse;border-color:#9ABAD9;border-spacing:0;}<br />
.tg td{background-color:#EBF5FF;border-color:#9ABAD9;border-style:solid;border-width:1px;color:#444;<br />
font-family:Arial, sans-serif;font-size:14px;overflow:hidden;padding:10px 5px;word-break:normal;}<br />
.tg th{background-color:#1e73be;border-color:#9ABAD9;border-style:solid;border-width:1px;color:#fff;<br />
font-family:Arial, sans-serif;font-size:14px;font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}<br />
.tg .tg-5l4b{background-color:#D2E4FC;border-color:inherit;font-family:Arial, Helvetica, sans-serif !important;;font-size:13px;<br />
font-weight:bold;text-align:left;vertical-align:top}<br />
.tg .tg-pnvv{border-color:inherit;font-family:Arial, Helvetica, sans-serif !important;;font-size:13px;font-weight:bold;<br />
text-align:left;vertical-align:top}<br />
.tg .tg-8mrg{background-color:#D2E4FC;border-color:inherit;font-family:Arial, Helvetica, sans-serif !important;;font-size:13px;<br />
text-align:left;vertical-align:top}<br />
.tg .tg-udd8{background-color:#ebf5ff;border-color:inherit;color:#333333;font-family:Arial, Helvetica, sans-serif !important;;<br />
font-size:13px;font-weight:bold;text-align:left;vertical-align:top}<br />
.tg .tg-xavx{background-color:#ebf5ff;border-color:inherit;color:#333333;font-family:Arial, Helvetica, sans-serif !important;;<br />
font-size:13px;text-align:left;vertical-align:top}<br />
.tg .tg-2klg{border-color:inherit;font-family:Arial, Helvetica, sans-serif !important;;font-size:13px;text-align:left;<br />
vertical-align:top}<br />
@media screen and (max-width: 767px) {.tg {width: auto !important;}.tg col {width: auto !important;}.tg-wrap {overflow-x: auto;-webkit-overflow-scrolling: touch;}}</style>
<div class="tg-wrap">
<table class="tg" style="undefined;table-layout: fixed; width: 1314px;"><colgroup> <col style="width: 193.116667px;" /> <col style="width: 43.116667px;" /> <col style="width: 43.116667px;" /> <col style="width: 43.116667px;" /> <col style="width: 43.116667px;" /> <col style="width: 43.116667px;" /> <col style="width: 43.116667px;" /> <col style="width: 43.116667px;" /> <col style="width: 43.116667px;" /> <col style="width: 43.116667px;" /> <col style="width: 43.116667px;" /> <col style="width: 43.116667px;" /> <col style="width: 43.116667px;" /> <col style="width: 43.116667px;" /> <col style="width: 43.116667px;" /> <col style="width: 43.116667px;" /> <col style="width: 43.116667px;" /> <col style="width: 43.116667px;" /> <col style="width: 43.116667px;" /> <col style="width: 43.116667px;" /> <col style="width: 43.116667px;" /> <col style="width: 43.116667px;" /> <col style="width: 43.116667px;" /> <col style="width: 43.116667px;" /> <col style="width: 43.116667px;" /> <col style="width: 43.116667px;" /> <col style="width: 43.116667px;" /> </colgroup>
<tbody>
<tr>
<td class="tg-udd8">Kampen, Station Zuid</td>
<td class="tg-xavx">06:18</td>
<td class="tg-xavx">06:48</td>
<td class="tg-xavx">07:18</td>
<td class="tg-xavx">07:48</td>
<td class="tg-xavx">08:18</td>
<td class="tg-xavx">08:48</td>
<td class="tg-xavx">09:18</td>
<td class="tg-xavx">09:48</td>
<td class="tg-xavx">10:18</td>
<td class="tg-xavx">10:48</td>
<td class="tg-xavx">11:18</td>
<td class="tg-xavx">11:48</td>
<td class="tg-xavx">12:18</td>
<td class="tg-xavx">12:48</td>
<td class="tg-xavx">13:18</td>
<td class="tg-xavx">13:48</td>
<td class="tg-xavx">14:18</td>
<td class="tg-xavx">14:48</td>
<td class="tg-xavx">15:18</td>
<td class="tg-xavx">15:48</td>
<td class="tg-xavx">16:18</td>
<td class="tg-xavx">16:48</td>
<td class="tg-xavx">17:18</td>
<td class="tg-xavx">17:48</td>
<td class="tg-xavx">18:18</td>
<td class="tg-xavx">18:48</td>
</tr>
<tr>
<td class="tg-5l4b">Kampen, Lange Akker</td>
<td class="tg-8mrg">06:21</td>
<td class="tg-8mrg">06:51</td>
<td class="tg-8mrg">07:21</td>
<td class="tg-8mrg">07:51</td>
<td class="tg-8mrg">08:21</td>
<td class="tg-8mrg">08:51</td>
<td class="tg-8mrg">09:21</td>
<td class="tg-8mrg">09:51</td>
<td class="tg-8mrg">10:21</td>
<td class="tg-8mrg">10:51</td>
<td class="tg-8mrg">11:21</td>
<td class="tg-8mrg">11:51</td>
<td class="tg-8mrg">12:21</td>
<td class="tg-8mrg">12:51</td>
<td class="tg-8mrg">13:21</td>
<td class="tg-8mrg">13:51</td>
<td class="tg-8mrg">14:21</td>
<td class="tg-8mrg">14:51</td>
<td class="tg-8mrg">15:21</td>
<td class="tg-8mrg">15:51</td>
<td class="tg-8mrg">16:21</td>
<td class="tg-8mrg">16:51</td>
<td class="tg-8mrg">17:21</td>
<td class="tg-8mrg">17:51</td>
<td class="tg-8mrg">18:21</td>
<td class="tg-8mrg">18:51</td>
</tr>
<tr>
<td class="tg-pnvv">Kampen, Kwekerije</td>
<td class="tg-2klg">06:23</td>
<td class="tg-2klg">06:53</td>
<td class="tg-2klg">07:23</td>
<td class="tg-2klg">07:53</td>
<td class="tg-2klg">08:23</td>
<td class="tg-2klg">08:53</td>
<td class="tg-2klg">09:23</td>
<td class="tg-2klg">09:53</td>
<td class="tg-2klg">10:23</td>
<td class="tg-2klg">10:53</td>
<td class="tg-2klg">11:23</td>
<td class="tg-2klg">11:53</td>
<td class="tg-2klg">12:23</td>
<td class="tg-2klg">12:53</td>
<td class="tg-2klg">13:23</td>
<td class="tg-2klg">13:53</td>
<td class="tg-2klg">14:23</td>
<td class="tg-2klg">14:53</td>
<td class="tg-2klg">15:23</td>
<td class="tg-2klg">15:53</td>
<td class="tg-2klg">16:23</td>
<td class="tg-2klg">16:53</td>
<td class="tg-2klg">17:23</td>
<td class="tg-2klg">17:53</td>
<td class="tg-2klg">18:23</td>
<td class="tg-2klg">18:53</td>
</tr>
<tr>
<td class="tg-5l4b">Kampen, Europa-Allee</td>
<td class="tg-8mrg">06:25</td>
<td class="tg-8mrg">06:55</td>
<td class="tg-8mrg">07:25</td>
<td class="tg-8mrg">07:55</td>
<td class="tg-8mrg">08:25</td>
<td class="tg-8mrg">08:55</td>
<td class="tg-8mrg">09:25</td>
<td class="tg-8mrg">09:55</td>
<td class="tg-8mrg">10:25</td>
<td class="tg-8mrg">10:55</td>
<td class="tg-8mrg">11:25</td>
<td class="tg-8mrg">11:55</td>
<td class="tg-8mrg">12:25</td>
<td class="tg-8mrg">12:55</td>
<td class="tg-8mrg">13:25</td>
<td class="tg-8mrg">13:55</td>
<td class="tg-8mrg">14:25</td>
<td class="tg-8mrg">14:55</td>
<td class="tg-8mrg">15:25</td>
<td class="tg-8mrg">15:55</td>
<td class="tg-8mrg">16:25</td>
<td class="tg-8mrg">16:55</td>
<td class="tg-8mrg">17:25</td>
<td class="tg-8mrg">17:55</td>
<td class="tg-8mrg">18:25</td>
<td class="tg-8mrg">18:55</td>
</tr>
<tr>
<td class="tg-pnvv">Kampen, Acacialaan</td>
<td class="tg-2klg">06:27</td>
<td class="tg-2klg">06:57</td>
<td class="tg-2klg">07:27</td>
<td class="tg-2klg">07:57</td>
<td class="tg-2klg">08:27</td>
<td class="tg-2klg">08:57</td>
<td class="tg-2klg">09:27</td>
<td class="tg-2klg">09:57</td>
<td class="tg-2klg">10:27</td>
<td class="tg-2klg">10:57</td>
<td class="tg-2klg">11:27</td>
<td class="tg-2klg">11:57</td>
<td class="tg-2klg">12:27</td>
<td class="tg-2klg">12:57</td>
<td class="tg-2klg">13:27</td>
<td class="tg-2klg">13:57</td>
<td class="tg-2klg">14:27</td>
<td class="tg-2klg">14:57</td>
<td class="tg-2klg">15:27</td>
<td class="tg-2klg">15:57</td>
<td class="tg-2klg">16:27</td>
<td class="tg-2klg">16:57</td>
<td class="tg-2klg">17:27</td>
<td class="tg-2klg">17:57</td>
<td class="tg-2klg">18:27</td>
<td class="tg-2klg">18:57</td>
</tr>
<tr>
<td class="tg-5l4b">Kampen, Isala Polikliniek</td>
<td class="tg-8mrg">06:30</td>
<td class="tg-8mrg">07:00</td>
<td class="tg-8mrg">07:30</td>
<td class="tg-8mrg">08:00</td>
<td class="tg-8mrg">08:30</td>
<td class="tg-8mrg">09:00</td>
<td class="tg-8mrg">09:30</td>
<td class="tg-8mrg">10:00</td>
<td class="tg-8mrg">10:30</td>
<td class="tg-8mrg">11:00</td>
<td class="tg-8mrg">11:30</td>
<td class="tg-8mrg">12:00</td>
<td class="tg-8mrg">12:30</td>
<td class="tg-8mrg">13:00</td>
<td class="tg-8mrg">13:30</td>
<td class="tg-8mrg">14:00</td>
<td class="tg-8mrg">14:30</td>
<td class="tg-8mrg">15:00</td>
<td class="tg-8mrg">15:30</td>
<td class="tg-8mrg">16:00</td>
<td class="tg-8mrg">16:30</td>
<td class="tg-8mrg">17:00</td>
<td class="tg-8mrg">17:30</td>
<td class="tg-8mrg">18:00</td>
<td class="tg-8mrg">18:30</td>
<td class="tg-8mrg">19:00</td>
</tr>
<tr>
<td class="tg-pnvv">Kampen, Stadhuis</td>
<td class="tg-2klg">06:31</td>
<td class="tg-2klg">07:01</td>
<td class="tg-2klg">07:31</td>
<td class="tg-2klg">08:01</td>
<td class="tg-2klg">08:31</td>
<td class="tg-2klg">09:01</td>
<td class="tg-2klg">09:31</td>
<td class="tg-2klg">10:01</td>
<td class="tg-2klg">10:31</td>
<td class="tg-2klg">11:01</td>
<td class="tg-2klg">11:31</td>
<td class="tg-2klg">12:01</td>
<td class="tg-2klg">12:31</td>
<td class="tg-2klg">13:01</td>
<td class="tg-2klg">13:31</td>
<td class="tg-2klg">14:01</td>
<td class="tg-2klg">14:31</td>
<td class="tg-2klg">15:01</td>
<td class="tg-2klg">15:31</td>
<td class="tg-2klg">16:01</td>
<td class="tg-2klg">16:31</td>
<td class="tg-2klg">17:01</td>
<td class="tg-2klg">17:31</td>
<td class="tg-2klg">18:01</td>
<td class="tg-2klg">18:31</td>
<td class="tg-2klg">19:01</td>
</tr>
<tr>
<td class="tg-5l4b">Kampen, Beekmanstraat</td>
<td class="tg-8mrg">06:33</td>
<td class="tg-8mrg">07:03</td>
<td class="tg-8mrg">07:33</td>
<td class="tg-8mrg">08:03</td>
<td class="tg-8mrg">08:33</td>
<td class="tg-8mrg">09:03</td>
<td class="tg-8mrg">09:33</td>
<td class="tg-8mrg">10:03</td>
<td class="tg-8mrg">10:33</td>
<td class="tg-8mrg">11:03</td>
<td class="tg-8mrg">11:33</td>
<td class="tg-8mrg">12:03</td>
<td class="tg-8mrg">12:33</td>
<td class="tg-8mrg">13:03</td>
<td class="tg-8mrg">13:33</td>
<td class="tg-8mrg">14:03</td>
<td class="tg-8mrg">14:33</td>
<td class="tg-8mrg">15:03</td>
<td class="tg-8mrg">15:33</td>
<td class="tg-8mrg">16:03</td>
<td class="tg-8mrg">16:33</td>
<td class="tg-8mrg">17:03</td>
<td class="tg-8mrg">17:33</td>
<td class="tg-8mrg">18:03</td>
<td class="tg-8mrg">18:33</td>
<td class="tg-8mrg">19:03</td>
</tr>
<tr>
<td class="tg-pnvv">Kampen, Leeghwaterstraat</td>
<td class="tg-2klg">06:34</td>
<td class="tg-2klg">07:04</td>
<td class="tg-2klg">07:34</td>
<td class="tg-2klg">08:04</td>
<td class="tg-2klg">08:34</td>
<td class="tg-2klg">09:04</td>
<td class="tg-2klg">09:34</td>
<td class="tg-2klg">10:04</td>
<td class="tg-2klg">10:34</td>
<td class="tg-2klg">11:04</td>
<td class="tg-2klg">11:34</td>
<td class="tg-2klg">12:04</td>
<td class="tg-2klg">12:34</td>
<td class="tg-2klg">13:04</td>
<td class="tg-2klg">13:34</td>
<td class="tg-2klg">14:04</td>
<td class="tg-2klg">14:34</td>
<td class="tg-2klg">15:04</td>
<td class="tg-2klg">15:34</td>
<td class="tg-2klg">16:04</td>
<td class="tg-2klg">16:34</td>
<td class="tg-2klg">17:04</td>
<td class="tg-2klg">17:34</td>
<td class="tg-2klg">18:04</td>
<td class="tg-2klg">18:34</td>
<td class="tg-2klg">19:04</td>
</tr>
<tr>
<td class="tg-5l4b">Kampen, Bovenbroeksweg</td>
<td class="tg-8mrg">06:35</td>
<td class="tg-8mrg">07:05</td>
<td class="tg-8mrg">07:35</td>
<td class="tg-8mrg">08:05</td>
<td class="tg-8mrg">08:35</td>
<td class="tg-8mrg">09:05</td>
<td class="tg-8mrg">09:35</td>
<td class="tg-8mrg">10:05</td>
<td class="tg-8mrg">10:35</td>
<td class="tg-8mrg">11:05</td>
<td class="tg-8mrg">11:35</td>
<td class="tg-8mrg">12:05</td>
<td class="tg-8mrg">12:35</td>
<td class="tg-8mrg">13:05</td>
<td class="tg-8mrg">13:35</td>
<td class="tg-8mrg">14:05</td>
<td class="tg-8mrg">14:35</td>
<td class="tg-8mrg">15:05</td>
<td class="tg-8mrg">15:35</td>
<td class="tg-8mrg">16:05</td>
<td class="tg-8mrg">16:35</td>
<td class="tg-8mrg">17:05</td>
<td class="tg-8mrg">17:35</td>
<td class="tg-8mrg">18:05</td>
<td class="tg-8mrg">18:35</td>
<td class="tg-8mrg">19:05</td>
</tr>
<tr>
<td class="tg-pnvv">Kampen, Symfonielaan</td>
<td class="tg-2klg">06:38</td>
<td class="tg-2klg">07:08</td>
<td class="tg-2klg">07:38</td>
<td class="tg-2klg">08:08</td>
<td class="tg-2klg">08:38</td>
<td class="tg-2klg">09:08</td>
<td class="tg-2klg">09:38</td>
<td class="tg-2klg">10:08</td>
<td class="tg-2klg">10:38</td>
<td class="tg-2klg">11:08</td>
<td class="tg-2klg">11:38</td>
<td class="tg-2klg">12:08</td>
<td class="tg-2klg">12:38</td>
<td class="tg-2klg">13:08</td>
<td class="tg-2klg">13:38</td>
<td class="tg-2klg">14:08</td>
<td class="tg-2klg">14:38</td>
<td class="tg-2klg">15:08</td>
<td class="tg-2klg">15:38</td>
<td class="tg-2klg">16:08</td>
<td class="tg-2klg">16:38</td>
<td class="tg-2klg">17:08</td>
<td class="tg-2klg">17:38</td>
<td class="tg-2klg">18:08</td>
<td class="tg-2klg">18:38</td>
<td class="tg-2klg">19:08</td>
</tr>
<tr>
<td class="tg-5l4b">Kampen, Station Zuid</td>
<td class="tg-8mrg">06:42</td>
<td class="tg-8mrg">07:12</td>
<td class="tg-8mrg">07:42</td>
<td class="tg-8mrg">08:12</td>
<td class="tg-8mrg">08:42</td>
<td class="tg-8mrg">09:12</td>
<td class="tg-8mrg">09:42</td>
<td class="tg-8mrg">10:12</td>
<td class="tg-8mrg">10:42</td>
<td class="tg-8mrg">11:12</td>
<td class="tg-8mrg">11:42</td>
<td class="tg-8mrg">12:12</td>
<td class="tg-8mrg">12:42</td>
<td class="tg-8mrg">13:12</td>
<td class="tg-8mrg">13:42</td>
<td class="tg-8mrg">14:12</td>
<td class="tg-8mrg">14:42</td>
<td class="tg-8mrg">15:12</td>
<td class="tg-8mrg">15:42</td>
<td class="tg-8mrg">16:12</td>
<td class="tg-8mrg">16:42</td>
<td class="tg-8mrg">17:12</td>
<td class="tg-8mrg">17:42</td>
<td class="tg-8mrg">18:12</td>
<td class="tg-8mrg">18:42</td>
<td class="tg-8mrg">19:12</td>
</tr>
</tbody>
</table>
</div>

[kaassouffle]

Wat heb je opgezocht dan en wat werkte niet?
Heb je al gezocht op 'responsive table css' oid?

[erwn]

Of fixed left table column De eerste hit (w3docs) doet volgens mij wat je zoekt. Met voorbeeld en alles.

[TwingyTwingy]

kaassouffle schreef op zondag 14 november 2021 @ 08:54:
Wat heb je opgezocht dan en wat werkte niet?
Heb je al gezocht op 'responsive table css' oid?

Hij is opzich wel responsive (kon je ook aanvinken bij deze generator). Als je hem op mobiel opent kun je scrollen, alleen op de computer loopt die dwars door het beeld heen. Ik moet denk ik iets van een maximale breedte toevoegen net als dat de eerste kolom vast moet worden gezet, maar de voorbeelden op internet zijn vaak van andere tabellen en werken niet als ik ze in de mijne verwerk.

[luukvr]

Je zou een overflow kunnen instellen zodat de tabel niet uit je pagina breekt.

Maar denk dat je beter met div-jes kan gaan werken zodat hij op mobiel gewoon verticaal doorgaat met de tijdblokken (dmv float). Voor mobiel zou je dan de tijden misschien pas laten zien na klikken van halte (met javascript css aanpassen).