'How can i make responsive HTML Table with 90% width of screen
Hello i have issue with table ive created table and at 1920*1080 24" monitor it looks very good. Issue is if user has smaller monitor like notebook, table, phone. Use must use horizontal scroller. How can i make responsiv table which will be always for example 90% of the screen width without horizontal scrolling?
Table what i have is here: https://natus.cz/tabulka/
Id like something like this. I mean right side.
https://bbcode0.com/full/2021/4/12/2b8c685ff1871d02b08a0bb0b3fdd50c-full.png.html
<div style="overflow-x: auto;">
<table style="width: 100%;max-width: 90vw;height: 1495px;">
<colgroup>
<col style="background-color: #c491ff;" span="1">
<col style="background-color: #8cc6fe;" span="1">
<col style="background-color: #59fe93;" span="1">
<col style="background-color: #8cfd58;" span="1">
<col style="background-color: #bffb91;" span="1">
<col style="background-color: #fdfdc9;" span="1">
<col style="background-color: #fdfb67;" span="1">
<col style="background-color: #fec800;" span="1">
<col style="background-color: #ff9500;" span="1">
<col style="background-color: #ff6401;" span="1">
<col style="background-color: #fe451c;" span="1">
<col style="background-color: #fd451c;" span="1">
<col style="background-color: #fb0303;" span="1">
</colgroup>
<tbody>
<tr style="height: 48px;">
<th style="height: 48px; width: 44.02%;" colspan="2">
SILNĚ ZÁSADOTVORNÉ
</th>
<th style="height: 48px; width: 144.255%;" colspan="4">
MÍRNĚ ZÁSADOTVORNÉ
</th>
<th style="height: 48px; width: 7.68673%;">
NEUTRÁLNÍ
</th>
<th style="height: 48px; width: 30.76%;" colspan="4">
MÍRNĚ KYSELINOTVORNÉ
</th>
<th style="height: 48px; width: 15.38%;" colspan="2">
SILNĚ KYSELINOTVORNÉ
</th>
</tr>
<tr class="" style="height: 24px;">
<td style="width: 14.26%; height: 24px;">
<span style="font-size: 14pt;"><strong>pH 9</strong></span>
</td>
<td class="no-pading" style="width: 29.76%; height: 24px;">
<span style="font-size: 14pt;"><strong>pH 8.5 – 8</strong></span>
</td>
<td style="width: 7.76%; height: 24px;">
<span style="font-size: 14pt;"><strong>pH 8</strong></span>
</td>
<td class="no-pading" style="width: 32.5003%; height: 24px;">
<span style="font-size: 14pt;"><strong>pH 8 – 7.5</strong></span>
</td>
<td style="width: 103.27%; height: 24px;">
<span style="font-size: 14pt;"><strong>pH 7.5</strong></span>
</td>
<td class="no-pading" style="width: 0.725163%; height: 24px;">
<span style="font-size: 14pt;"><strong>pH 7.5 – 7</strong></span>
</td>
<td style="width: 7.68673%; height: 24px;">
<span style="font-size: 14pt;"><strong>pH 7</strong></span>
</td>
<td style="width: 7.69%; height: 24px;">
<span style="font-size: 14pt;"><strong>pH 6.5</strong></span>
</td>
<td class="no-pading" style="width: 7.69%; height: 24px;">
<span style="font-size: 14pt;"><strong>pH 6.5 – 6</strong></span>
</td>
<td style="width: 7.69%; height: 24px;">
<span style="font-size: 14pt;"><strong>pH 6</strong></span>
</td>
<td style="width: 7.69%; height: 24px;">
<span style="font-size: 14pt;"><strong>pH 5.5</strong></span>
</td>
<td style="width: 7.69%; height: 24px;">
<span style="font-size: 14pt;"><strong> pH 5</strong></span>
</td>
<td class="no-pading" style="width: 7.69%; height: 24px;">
<span style="font-size: 14pt;"><strong>pH 5 – 4</strong></span>
</td>
</tr>
<tr style="height: 24px;">
<td style="width: 14.26%; height: 24px;">
Relaxace
</td>
<td style="width: 29.76%; height: 24px;">
Asparagus
</td>
<td style="width: 7.76%; height: 24px;">
Jablka
</td>
<td style="width: 32.5003%; height: 24px;">
Červená řepa
</td>
<td style="width: 103.27%; height: 24px;">
Okurka
</td>
<td style="width: 0.725163%; height: 24px;">
Amarant
</td>
<td style="width: 7.68673%; height: 24px;">
Syrové mléko
</td>
<td style="width: 7.69%; height: 24px;">
Špalda
</td>
<td style="width: 7.69%; height: 24px;">
Čočka
</td>
<td style="width: 7.69%; height: 24px;">
Pohanka
</td>
<td style="width: 7.69%; height: 24px;">
Mořské plody
</td>
<td style="width: 7.69%; height: 24px;">
Kuřecí maso
</td>
<td style="width: 7.69%; height: 24px;">
Hověží maso
</td>
</tr>
<tr style="height: 72px;">
<td style="width: 14.26%; height: 72px;">
Oddych
</td>
<td style="width: 29.76%; height: 72px;">
Čekanka
</td>
<td style="width: 7.76%; height: 72px;">
Meruňky
</td>
<td style="width: 32.5003%; height: 72px;">
Papriky
</td>
<td style="width: 103.27%; height: 72px;">
Artičoky
</td>
<td style="width: 0.725163%; height: 72px;">
Jáhly
</td>
<td style="width: 7.68673%; height: 72px;">
Oleje bio kvalita(kromě olyvového)
</td>
<td style="width: 7.69%; height: 72px;">
Brazilské ořechy
</td>
<td style="width: 7.69%; height: 72px;">
Ječmen
</td>
<td style="width: 7.69%; height: 72px;">
Rýžové chlebíčky
</td>
<td style="width: 7.69%; height: 72px;">
Ryby
</td>
<td style="width: 7.69%; height: 72px;">
Krůtí maso
</td>
<td style="width: 7.69%; height: 72px;">
Vepřové
</td>
</tr>
<tr style="height: 72px;">
<td style="width: 14.26%; height: 61px;">
Meditace
</td>
<td style="width: 29.76%; height: 61px;">
Ovocné zeleninové šťávy
</td>
<td style="width: 7.76%; height: 61px;">
Avokádo
</td>
<td style="width: 32.5003%; height: 61px;">
Brokolice
</td>
<td style="width: 103.27%; height: 61px;">
Lilek
</td>
<td style="width: 0.725163%; height: 61px;">
Quinoa
</td>
<td style="width: 7.68673%; height: 61px;">
Neslazený jogurt
</td>
<td style="width: 7.69%; height: 61px;">
Pekanové ořechy
</td>
<td style="width: 7.69%; height: 61px;">
Makadamové ořechy
</td>
<td style="width: 7.69%; height: 61px;">
Celozrnné krekry
</td>
<td style="width: 7.69%; height: 61px;">
Víno
</td>
<td style="width: 7.69%; height: 61px;">
Zvěřina
</td>
<td style="width: 7.69%; height: 61px;">
Telecí
</td>
</tr>
<tr style="height: 10px;">
<td style="width: 14.26%; height: 10px;">
Laskavost
</td>
<td style="width: 29.76%; height: 10px;">
Bylinný čaj
</td>
<td style="width: 7.76%; height: 10px;">
Banány
</td>
<td style="width: 32.5003%; height: 10px;">
Květák
</td>
<td style="width: 103.27%; height: 10px;">
Pór
</td>
<td style="width: 0.725163%; height: 10px;">
Rebarbora
</td>
<td style="width: 7.68673%; height: 10px;">
Syrovátka
</td>
<td style="width: 7.69%; height: 10px;">
Pistácie
</td>
<td style="width: 7.69%; height: 10px;">
Kešu
</td>
<td style="width: 7.69%; height: 10px;">
Celozrnné cereálie
</td>
<td style="width: 7.69%; height: 10px;">
Syrupy
</td>
<td style="width: 7.69%; height: 10px;">
Zajíc
</td>
<td style="width: 7.69%; height: 10px;">
Bílý cukr
</td>
</tr>
<tr style="height: 72px;">
<td style="width: 14.26%; height: 72px;">
Láska
</td>
<td style="width: 29.76%; height: 72px;">
Umeboshi
</td>
<td style="width: 7.76%; height: 72px;">
Dýně
</td>
<td style="width: 32.5003%; height: 72px;">
Zelí
</td>
<td style="width: 103.27%; height: 72px;">
Třešně
</td>
<td style="width: 0.725163%; height: 72px;">
Rajčata
</td>
<td style="width: 7.68673%; height: 72px;">
Smetana
</td>
<td style="width: 7.69%; height: 72px;">
Vaječný bílek
</td>
<td style="width: 7.69%; height: 72px;">
Pasterizované mléko
</td>
<td style="width: 7.69%; height: 72px;">
Domácí celozrnný chléb
</td>
<td style="width: 7.69%; height: 72px;">
Konzervy
</td>
<td style="width: 7.69%; height: 72px;">
Marmeláda
</td>
<td style="width: 7.69%; height: 72px;">
Bílá mouka
</td>
</tr>
<tr style="height: 56px;">
<td style="width: 14.26%; height: 56px;">
Mladý ječmen
</td>
<td style="width: 29.76%; height: 56px;">
Rozinky
</td>
<td style="width: 7.76%; height: 56px;">
Maliny
</td>
<td style="width: 32.5003%; height: 56px;">
Kapusta
</td>
<td style="width: 103.27%; height: 56px;">
Višně
</td>
<td style="width: 0.725163%; height: 56px;">
Ředkvička
</td>
<td style="width: 7.68673%; height: 56px;">
Bio máslo
</td>
<td style="width: 7.69%; height: 56px;">
Cottage cheese
</td>
<td style="width: 7.69%; height: 56px;">
Mléčné výrobky
</td>
<td style="width: 7.69%; height: 56px;">
Rýže červená
</td>
<td style="width: 7.69%; height: 56px;">
Zavařeniny
</td>
<td style="width: 7.69%; height: 56px;">
Hnědý cukr
</td>
<td style="width: 7.69%; height: 56px;">
Bílý chléb a pečivo
</td>
</tr>
<tr style="height: 56px;">
<td style="width: 14.26%; height: 56px;">
Citron
</td>
<td style="width: 29.76%; height: 56px;">
Hrušky
</td>
<td style="width: 7.76%; height: 56px;">
Rybíz
</td>
<td style="width: 32.5003%; height: 56px;">
Pastinák
</td>
<td style="width: 103.27%; height: 56px;">
Kaštany
</td>
<td style="width: 0.725163%; height: 56px;">
Křen
</td>
<td style="width: 7.68673%; height: 56px;"></td>
<td style="width: 7.69%; height: 56px;">
Měkké sýry
</td>
<td style="width: 7.69%; height: 56px;">
Jahodový syrup
</td>
<td style="width: 7.69%; height: 56px;">
Rýže hnědá
</td>
<td style="width: 7.69%; height: 56px;">
Oslazené cereálie
</td>
<td style="width: 7.69%; height: 56px;">
Čokoláda
</td>
<td style="width: 7.69%; height: 56px;">
Koláče
</td>
</tr>
<tr style="height: 64px;">
<td style="width: 14.26%; height: 64px;">
Červený meloun
</td>
<td style="width: 29.76%; height: 64px;">
Kiwi
</td>
<td style="width: 7.76%; height: 64px;">
Ostružiny
</td>
<td style="width: 32.5003%; height: 64px;">
Kedlubna
</td>
<td style="width: 103.27%; height: 64px;">
Okra
</td>
<td style="width: 0.725163%; height: 64px;">
Sojové boby
</td>
<td style="width: 7.68673%; height: 64px;"></td>
<td style="width: 7.69%; height: 64px;">
Zavařené olivy
</td>
<td style="width: 7.69%; height: 64px;">
Javorový syrup
</td>
<td style="width: 7.69%; height: 64px;">
Pšenice
</td>
<td style="width: 7.69%; height: 64px;">
Müsli a tyčinky
</td>
<td style="width: 7.69%; height: 64px;">
Těstoviny
</td>
<td style="width: 7.69%; height: 64px;">
Dorty
</td>
</tr>
<tr style="height: 56px;">
<td style="width: 14.26%; height: 56px;">
Petržel
</td>
<td style="width: 29.76%; height: 56px;">
Ananas
</td>
<td style="width: 7.76%; height: 56px;">
Čerstvé datle
</td>
<td style="width: 32.5003%; height: 56px;">
Tuřín
</td>
<td style="width: 103.27%; height: 56px;">
Rajčata
</td>
<td style="width: 0.725163%; height: 56px;">
Sojové mléko
</td>
<td style="width: 7.68673%; height: 56px;"></td>
<td style="width: 7.69%; height: 56px;">
Fazole
</td>
<td style="width: 7.69%; height: 56px;">
Ječný syrup
</td>
<td style="width: 7.69%; height: 56px;">
Ovesné vločky
</td>
<td style="width: 7.69%; height: 56px;">
Pšeničné klíčky
</td>
<td style="width: 7.69%; height: 56px;">
Rýže
</td>
<td style="width: 7.69%; height: 56px;">
Cigarety
</td>
</tr>
<tr style="height: 56px;">
<td class="second_half1" style="width: 14.26%; height: 56px;">
<span style="font-size: 14pt;"><strong>pH 8.5</strong></span>
</td>
<td style="width: 29.76%; height: 56px;">
Stévie
</td>
<td style="width: 7.76%; height: 56px;">
Čerstvé fíky
</td>
<td style="width: 32.5003%; height: 56px;">
Kukuřice
</td>
<td style="width: 103.27%; height: 56px;">
Houby
</td>
<td style="width: 0.725163%; height: 56px;">
Bio sojové produkty
</td>
<td style="width: 7.68673%; height: 56px;"></td>
<td style="width: 7.69%; height: 56px;">
Sušené švestky
</td>
<td style="width: 7.69%; height: 56px;">
Med
</td>
<td style="width: 7.69%; height: 56px;">
Tvrdé sýry
</td>
<td style="width: 7.69%; height: 56px;">
Celozrnný chléb
</td>
<td style="width: 7.69%; height: 56px;">
Krupice
</td>
<td style="width: 7.69%; height: 56px;">
Uzeniny
</td>
</tr>
<tr style="height: 56px;">
<td class="second_half1" style="width: 14.26%; height: 56px;">
Řasa agar
</td>
<td style="width: 29.76%; height: 56px;">
Chlorela
</td>
<td style="width: 7.76%; height: 56px;">
Grapefruit
</td>
<td style="width: 32.5003%; height: 56px;">
Tykev
</td>
<td style="width: 103.27%; height: 56px;">
Cibule
</td>
<td style="width: 0.725163%; height: 56px;">
Tofu
</td>
<td style="width: 7.68673%; height: 56px;"></td>
<td style="width: 7.69%; height: 56px;">
Borůvky
</td>
<td style="width: 7.69%; height: 56px;">
Fruktóza
</td>
<td style="width: 7.69%; height: 56px;">
Tvaroh
</td>
<td style="width: 7.69%; height: 56px;">
Sladká šlehačka
</td>
<td style="width: 7.69%; height: 56px;">
Pšeničný chléb
</td>
<td style="width: 7.69%; height: 56px;">
Masové výrobky
</td>
</tr>
<tr style="height: 56px;">
<td class="second_half1" style="width: 14.26%; height: 56px;">
Cantaloupe
</td>
<td style="width: 29.76%; height: 56px;">
Spirulina
</td>
<td style="width: 7.76%; height: 56px;">
Guava
</td>
<td style="width: 32.5003%; height: 56px;">
Brambory se slupkou
</td>
<td style="width: 103.27%; height: 56px;">
Čerstvý kokos
</td>
<td style="width: 0.725163%; height: 56px;">
Tempeh
</td>
<td style="width: 7.68673%; height: 56px;"></td>
<td style="width: 7.69%; height: 56px;">
Sušený kokos
</td>
<td style="width: 7.69%; height: 56px;">
Melasa
</td>
<td style="width: 7.69%; height: 56px;">
Bryndza
</td>
<td style="width: 7.69%; height: 56px;">
Slazené džusy
</td>
<td style="width: 7.69%; height: 56px;">
Pšeničné pečivo
</td>
<td style="width: 7.69%; height: 56px;">
Coca Cola
</td>
</tr>
<tr style="height: 56px;">
<td class="second_half1" style="width: 14.26%; height: 56px;">
Chilli
</td>
<td style="width: 29.76%; height: 56px;">
Syrový hráškový protein
</td>
<td style="width: 7.76%; height: 56px;">
Kaki
</td>
<td style="width: 32.5003%; height: 56px;">
Mladé fazolky
</td>
<td style="width: 103.27%; height: 56px;">
Syrový med
</td>
<td style="width: 0.725163%; height: 56px;">
Nutriční droždí
</td>
<td style="width: 7.68673%; height: 56px;"></td>
<td style="width: 7.69%; height: 56px;">
Brusinky
</td>
<td style="width: 7.69%; height: 56px;">
Hořčice
</td>
<td style="width: 7.69%; height: 56px;">
Kečup
</td>
<td style="width: 7.69%; height: 56px;">
Slazené jogurty
</td>
<td style="width: 7.69%; height: 56px;">
Bonbóny
</td>
<td class="second_half2" style="width: 7.69%; height: 56px;">
<strong>pH 4</strong>
</td>
</tr>
<tr style="height: 56px;">
<td class="second_half1" style="width: 14.26%; height: 56px;">
Sušené datle
</td>
<td style="width: 29.76%; height: 56px;">
Makové mléko
</td>
<td style="width: 7.76%; height: 56px;">
Broskve
</td>
<td style="width: 32.5003%; height: 56px;">
Kakaové boby
</td>
<td style="width: 103.27%; height: 56px;">
Růžičková kapusta
</td>
<td style="width: 0.725163%; height: 56px;">
Syrové kozí mléko
</td>
<td style="width: 7.68673%; height: 56px;"></td>
<td style="width: 7.69%; height: 56px;">
Lněné semínky
</td>
<td style="width: 7.69%; height: 56px;">
Muškátový ořech
</td>
<td style="width: 7.69%; height: 56px;">
Majonéza
</td>
<td style="width: 7.69%; height: 56px;">
Tvarohové jogurty
</td>
<td style="width: 7.69%; height: 56px;">
Slazené nápoje
</td>
<td class="second_half2" style="width: 7.69%; height: 56px;">
Umělé sladidla
</td>
</tr>
<tr style="height: 56px;">
<td class="second_half1" style="width: 14.26%; height: 56px;">
Sušené fíky
</td>
<td style="width: 29.76%; height: 56px;">
Mladý hrášek
</td>
<td style="width: 7.76%; height: 56px;">
Nektarinky
</td>
<td style="width: 32.5003%; height: 56px;">
Sladké brambory
</td>
<td style="width: 103.27%; height: 56px;">
Čerstvé olivy
</td>
<td style="width: 0.725163%; height: 56px;">
Olivový olej
</td>
<td style="width: 7.68673%; height: 56px;"></td>
<td style="width: 7.69%; height: 56px;">
Pasterizované kozí mléko
</td>
<td style="width: 7.69%; height: 56px;">
Otruby
</td>
<td style="width: 7.69%; height: 56px;">
Sójová omáčka
</td>
<td style="width: 7.69%; height: 56px;">
Oslezená mléka
</td>
<td style="width: 7.69%; height: 56px;">
Energy drinky
</td>
<td class="second_half2" style="width: 7.69%; height: 56px;">
Přepracování
</td>
</tr>
<tr style="height: 56px;">
<td class="second_half1" style="width: 14.26%; height: 56px;">
Chaluha
</td>
<td style="width: 29.76%; height: 56px;">
Mateřské mléko
</td>
<td style="width: 7.76%; height: 56px;">
Česnek
</td>
<td style="width: 32.5003%; height: 56px;">
Karobový prášek
</td>
<td style="width: 103.27%; height: 56px;">
Tamari
</td>
<td style="width: 0.725163%; height: 56px;">
Lněný olej
</td>
<td style="width: 7.68673%; height: 56px;"></td>
<td style="width: 7.69%; height: 56px;">
Ochucené máslo
</td>
<td style="width: 7.69%; height: 56px;">
Neochucený popcorn
</td>
<td style="width: 7.69%; height: 56px;">
Brambory
</td>
<td style="width: 7.69%; height: 56px;">
Domácí tabák
</td>
<td style="width: 7.69%; height: 56px;">
Kafe
</td>
<td class="second_half2" style="width: 7.69%; height: 56px;">
Hněv
</td>
</tr>
<tr style="height: 56px;">
<td class="second_half1" style="width: 14.26%; height: 56px;">
Limetka
</td>
<td style="width: 29.76%; height: 56px;">
Persimon
</td>
<td style="width: 7.76%; height: 56px;">
Salát
</td>
<td style="width: 32.5003%; height: 56px;">
Aloe Vera
</td>
<td style="width: 103.27%; height: 56px;">
Kakaový prášek
</td>
<td style="width: 0.725163%; height: 56px;">
Mandle
</td>
<td style="width: 7.68673%; height: 56px;"></td>
<td style="width: 7.69%; height: 56px;"></td>
<td style="width: 7.69%; height: 56px;">
Žito
</td>
<td style="width: 7.69%; height: 56px;">
Chléb s klíčkami
</td>
<td style="width: 7.69%; height: 56px;"></td>
<td style="width: 7.69%; height: 56px;">
Černý čaj
</td>
<td class="second_half2" style="width: 7.69%; height: 56px;">
Žárlivost
</td>
</tr>
<tr style="height: 56px;">
<td class="second_half1" style="width: 14.26%; height: 56px;">
Papája
</td>
<td style="width: 29.76%; height: 56px;">
Angrešt
</td>
<td style="width: 7.76%; height: 56px;">
Špenát
</td>
<td style="width: 32.5003%; height: 56px;">
Jahody
</td>
<td style="width: 103.27%; height: 56px;">
Miso
</td>
<td style="width: 0.725163%; height: 56px;">
Lískové ořechy
</td>
<td style="width: 7.68673%; height: 56px;"></td>
<td style="width: 7.69%; height: 56px;"></td>
<td style="width: 7.69%; height: 56px;">
Žitný chléb
</td>
<td style="width: 7.69%; height: 56px;"></td>
<td style="width: 7.69%; height: 56px;"></td>
<td style="width: 7.69%; height: 56px;">
Alkohol
</td>
<td class="second_half2" style="width: 7.69%; height: 56px;">
Strach
</td>
</tr>
<tr style="height: 56px;">
<td class="second_half1" style="width: 14.26%; height: 56px;">
Petržel
</td>
<td style="width: 29.76%; height: 56px;"></td>
<td style="width: 7.76%; height: 56px;">
List. zelen.
</td>
<td style="width: 32.5003%; height: 56px;">
Pomeranč
</td>
<td style="width: 103.27%; height: 56px;">
Taro
</td>
<td style="width: 0.725163%; height: 56px;">
Sezam
</td>
<td style="width: 7.68673%; height: 56px;"></td>
<td style="width: 7.69%; height: 56px;"></td>
<td style="width: 7.69%; height: 56px;">
Slunečnicové semínka
</td>
<td style="width: 7.69%; height: 56px;"></td>
<td style="width: 7.69%; height: 56px;"></td>
<td style="width: 7.69%; height: 56px;">
Pivo
</td>
<td class="second_half2" style="width: 7.69%; height: 56px;">
Chronický stres
</td>
</tr>
<tr style="height: 56px;">
<td class="second_half1" style="width: 14.26%; height: 56px;">
Mořské řasy
</td>
<td style="width: 29.76%; height: 56px;"></td>
<td style="width: 7.76%; height: 56px;">
Mrkev
</td>
<td style="width: 32.5003%; height: 56px;">
Zázvor
</td>
<td style="width: 103.27%; height: 56px;">
Rýžový ocet
</td>
<td style="width: 0.725163%; height: 56px;">
Baklažán
</td>
<td style="width: 7.68673%; height: 56px;"></td>
<td style="width: 7.69%; height: 56px;"></td>
<td style="width: 7.69%; height: 56px;">
Dýňové semínka
</td>
<td style="width: 7.69%; height: 56px;"></td>
<td style="width: 7.69%; height: 56px;"></td>
<td style="width: 7.69%; height: 56px;">
Bílý ocet
</td>
<td style="width: 7.69%; height: 56px;"></td>
</tr>
<tr style="height: 56px;">
<td class="second_half1" style="width: 14.26%; height: 56px;">
Chřest
</td>
<td style="width: 29.76%; height: 56px;"></td>
<td style="width: 7.76%; height: 56px;">
Celer
</td>
<td style="width: 32.5003%; height: 56px;">
Jablečný ocet
</td>
<td style="width: 103.27%; height: 56px;">
Bylinkové koření
</td>
<td style="width: 0.725163%; height: 56px;">
Kaštany
</td>
<td style="width: 7.68673%; height: 56px;"></td>
<td style="width: 7.69%; height: 56px;"></td>
<td style="width: 7.69%; height: 56px;"></td>
<td style="width: 7.69%; height: 56px;"></td>
<td style="width: 7.69%; height: 56px;"></td>
<td style="width: 7.69%; height: 56px;">
Stolní sůl
</td>
<td style="width: 7.69%; height: 56px;"></td>
</tr>
<tr style="height: 56px;">
<td class="second_half1" style="width: 14.26%; height: 56px;">
Hrozno
</td>
<td style="width: 29.76%; height: 56px;"></td>
<td style="width: 7.76%; height: 56px;">
Kokosový olej
</td>
<td style="width: 32.5003%; height: 56px;"></td>
<td style="width: 103.27%; height: 56px;"></td>
<td style="width: 0.725163%; height: 56px;">
Klíčky zrní
</td>
<td style="width: 7.68673%; height: 56px;"></td>
<td style="width: 7.69%; height: 56px;"></td>
<td style="width: 7.69%; height: 56px;"></td>
<td style="width: 7.69%; height: 56px;"></td>
<td style="width: 7.69%; height: 56px;"></td>
<td style="width: 7.69%; height: 56px;"></td>
<td style="width: 7.69%; height: 56px;"></td>
</tr>
</tbody>
</table>
</div>Solution 1:[1]
give fixed width property to you're body element for example :
body{
width:1920px;
}
Solution 2:[2]
For that, you have to set all tr td widths according to 100%. like if you want 5 parts of a table so you divided 100 into 5 parts is it odd or even. As I see you didn't follow that. Thanks.
Solution 3:[3]
You just need to add:
table{
table-layout: fixed;
}
This way the table will accept your width set. Here the width applied are those in your th this is why it seems not equal.
DEMO (reduced tr line compared to original because of limited lines).
table{
table-layout: fixed;
}<div style="overflow-x: auto;">
<table style="width: 100%;max-width: 90vw;height: 1495px;">
<colgroup>
<col style="background-color: #c491ff;" span="1">
<col style="background-color: #8cc6fe;" span="1">
<col style="background-color: #59fe93;" span="1">
<col style="background-color: #8cfd58;" span="1">
<col style="background-color: #bffb91;" span="1">
<col style="background-color: #fdfdc9;" span="1">
<col style="background-color: #fdfb67;" span="1">
<col style="background-color: #fec800;" span="1">
<col style="background-color: #ff9500;" span="1">
<col style="background-color: #ff6401;" span="1">
<col style="background-color: #fe451c;" span="1">
<col style="background-color: #fd451c;" span="1">
<col style="background-color: #fb0303;" span="1">
</colgroup>
<tbody>
<tr style="height: 48px;">
<th style="height: 48px; width: 44.02%;" colspan="2">
SILN? ZÁSADOTVORNÉ
</th>
<th style="height: 48px; width: 144.255%;" colspan="4">
MÍRN? ZÁSADOTVORNÉ
</th>
<th style="height: 48px; width: 7.68673%;">
NEUTRÁLNÍ
</th>
<th style="height: 48px; width: 30.76%;" colspan="4">
MÍRN? KYSELINOTVORNÉ
</th>
<th style="height: 48px; width: 15.38%;" colspan="2">
SILN? KYSELINOTVORNÉ
</th>
</tr>
<tr class="" style="height: 24px;">
<td style="width: 14.26%; height: 24px;">
<span style="font-size: 14pt;"><strong>pH 9</strong></span>
</td>
<td class="no-pading" style="width: 29.76%; height: 24px;">
<span style="font-size: 14pt;"><strong>pH 8.5 – 8</strong></span>
</td>
<td style="width: 7.76%; height: 24px;">
<span style="font-size: 14pt;"><strong>pH 8</strong></span>
</td>
<td class="no-pading" style="width: 32.5003%; height: 24px;">
<span style="font-size: 14pt;"><strong>pH 8 – 7.5</strong></span>
</td>
<td style="width: 103.27%; height: 24px;">
<span style="font-size: 14pt;"><strong>pH 7.5</strong></span>
</td>
<td class="no-pading" style="width: 0.725163%; height: 24px;">
<span style="font-size: 14pt;"><strong>pH 7.5 – 7</strong></span>
</td>
<td style="width: 7.68673%; height: 24px;">
<span style="font-size: 14pt;"><strong>pH 7</strong></span>
</td>
<td style="width: 7.69%; height: 24px;">
<span style="font-size: 14pt;"><strong>pH 6.5</strong></span>
</td>
<td class="no-pading" style="width: 7.69%; height: 24px;">
<span style="font-size: 14pt;"><strong>pH 6.5 – 6</strong></span>
</td>
<td style="width: 7.69%; height: 24px;">
<span style="font-size: 14pt;"><strong>pH 6</strong></span>
</td>
<td style="width: 7.69%; height: 24px;">
<span style="font-size: 14pt;"><strong>pH 5.5</strong></span>
</td>
<td style="width: 7.69%; height: 24px;">
<span style="font-size: 14pt;"><strong> pH 5</strong></span>
</td>
<td class="no-pading" style="width: 7.69%; height: 24px;">
<span style="font-size: 14pt;"><strong>pH 5 – 4</strong></span>
</td>
</tr>
<tr style="height: 24px;">
<td style="width: 14.26%; height: 24px;">
Relaxace
</td>
<td style="width: 29.76%; height: 24px;">
Asparagus
</td>
<td style="width: 7.76%; height: 24px;">
Jablka
</td>
<td style="width: 32.5003%; height: 24px;">
?ervená ?epa
</td>
<td style="width: 103.27%; height: 24px;">
Okurka
</td>
<td style="width: 0.725163%; height: 24px;">
Amarant
</td>
<td style="width: 7.68673%; height: 24px;">
Syrové mléko
</td>
<td style="width: 7.69%; height: 24px;">
Špalda
</td>
<td style="width: 7.69%; height: 24px;">
?o?ka
</td>
<td style="width: 7.69%; height: 24px;">
Pohanka
</td>
<td style="width: 7.69%; height: 24px;">
Mo?ské plody
</td>
<td style="width: 7.69%; height: 24px;">
Ku?ecí maso
</td>
<td style="width: 7.69%; height: 24px;">
Hov?ží maso
</td>
</tr>
<tr style="height: 72px;">
<td style="width: 14.26%; height: 72px;">
Oddych
</td>
<td style="width: 29.76%; height: 72px;">
?ekanka
</td>
<td style="width: 7.76%; height: 72px;">
Meru?ky
</td>
<td style="width: 32.5003%; height: 72px;">
Papriky
</td>
<td style="width: 103.27%; height: 72px;">
Arti?oky
</td>
<td style="width: 0.725163%; height: 72px;">
Jáhly
</td>
<td style="width: 7.68673%; height: 72px;">
Oleje bio kvalita(krom? olyvového)
</td>
<td style="width: 7.69%; height: 72px;">
Brazilské o?echy
</td>
<td style="width: 7.69%; height: 72px;">
Je?men
</td>
<td style="width: 7.69%; height: 72px;">
Rýžové chlebí?ky
</td>
<td style="width: 7.69%; height: 72px;">
Ryby
</td>
<td style="width: 7.69%; height: 72px;">
Kr?tí maso
</td>
<td style="width: 7.69%; height: 72px;">
Vep?ové
</td>
</tr>
<tr style="height: 72px;">
<td style="width: 14.26%; height: 61px;">
Meditace
</td>
<td style="width: 29.76%; height: 61px;">
Ovocné zeleninové š?ávy
</td>
<td style="width: 7.76%; height: 61px;">
Avokádo
</td>
<td style="width: 32.5003%; height: 61px;">
Brokolice
</td>
<td style="width: 103.27%; height: 61px;">
Lilek
</td>
<td style="width: 0.725163%; height: 61px;">
Quinoa
</td>
<td style="width: 7.68673%; height: 61px;">
Neslazený jogurt
</td>
<td style="width: 7.69%; height: 61px;">
Pekanové o?echy
</td>
<td style="width: 7.69%; height: 61px;">
Makadamové o?echy
</td>
<td style="width: 7.69%; height: 61px;">
Celozrnné krekry
</td>
<td style="width: 7.69%; height: 61px;">
Víno
</td>
<td style="width: 7.69%; height: 61px;">
Zv??ina
</td>
<td style="width: 7.69%; height: 61px;">
Telecí
</td>
</tr>
<tr style="height: 10px;">
<td style="width: 14.26%; height: 10px;">
Laskavost
</td>
<td style="width: 29.76%; height: 10px;">
Bylinný ?aj
</td>
<td style="width: 7.76%; height: 10px;">
Banány
</td>
<td style="width: 32.5003%; height: 10px;">
Kv?ták
</td>
<td style="width: 103.27%; height: 10px;">
Pór
</td>
<td style="width: 0.725163%; height: 10px;">
Rebarbora
</td>
<td style="width: 7.68673%; height: 10px;">
Syrovátka
</td>
<td style="width: 7.69%; height: 10px;">
Pistácie
</td>
<td style="width: 7.69%; height: 10px;">
Kešu
</td>
<td style="width: 7.69%; height: 10px;">
Celozrnné cereálie
</td>
<td style="width: 7.69%; height: 10px;">
Syrupy
</td>
<td style="width: 7.69%; height: 10px;">
Zajíc
</td>
<td style="width: 7.69%; height: 10px;">
Bílý cukr
</td>
</tr>
<tr style="height: 72px;">
<td style="width: 14.26%; height: 72px;">
Láska
</td>
<td style="width: 29.76%; height: 72px;">
Umeboshi
</td>
<td style="width: 7.76%; height: 72px;">
Dýn?
</td>
<td style="width: 32.5003%; height: 72px;">
Zelí
</td>
<td style="width: 103.27%; height: 72px;">
T?ešn?
</td>
<td style="width: 0.725163%; height: 72px;">
Raj?ata
</td>
<td style="width: 7.68673%; height: 72px;">
Smetana
</td>
<td style="width: 7.69%; height: 72px;">
Vaje?ný bílek
</td>
<td style="width: 7.69%; height: 72px;">
Pasterizované mléko
</td>
<td style="width: 7.69%; height: 72px;">
Domácí celozrnný chléb
</td>
<td style="width: 7.69%; height: 72px;">
Konzervy
</td>
<td style="width: 7.69%; height: 72px;">
Marmeláda
</td>
<td style="width: 7.69%; height: 72px;">
Bílá mouka
</td>
</tr>
<tr style="height: 56px;">
<td style="width: 14.26%; height: 56px;">
Mladý je?men
</td>
<td style="width: 29.76%; height: 56px;">
Rozinky
</td>
<td style="width: 7.76%; height: 56px;">
Maliny
</td>
<td style="width: 32.5003%; height: 56px;">
Kapusta
</td>
<td style="width: 103.27%; height: 56px;">
Višn?
</td>
<td style="width: 0.725163%; height: 56px;">
?edkvi?ka
</td>
<td style="width: 7.68673%; height: 56px;">
Bio máslo
</td>
<td style="width: 7.69%; height: 56px;">
Cottage cheese
</td>
<td style="width: 7.69%; height: 56px;">
Mlé?né výrobky
</td>
<td style="width: 7.69%; height: 56px;">
Rýže ?ervená
</td>
<td style="width: 7.69%; height: 56px;">
Zava?eniny
</td>
<td style="width: 7.69%; height: 56px;">
Hn?dý cukr
</td>
<td style="width: 7.69%; height: 56px;">
Bílý chléb a pe?ivo
</td>
</tr>
<tr style="height: 56px;">
<td style="width: 14.26%; height: 56px;">
Citron
</td>
<td style="width: 29.76%; height: 56px;">
Hrušky
</td>
<td style="width: 7.76%; height: 56px;">
Rybíz
</td>
<td style="width: 32.5003%; height: 56px;">
Pastinák
</td>
<td style="width: 103.27%; height: 56px;">
Kaštany
</td>
<td style="width: 0.725163%; height: 56px;">
K?en
</td>
<td style="width: 7.68673%; height: 56px;"></td>
<td style="width: 7.69%; height: 56px;">
M?kké sýry
</td>
<td style="width: 7.69%; height: 56px;">
Jahodový syrup
</td>
<td style="width: 7.69%; height: 56px;">
Rýže hn?dá
</td>
<td style="width: 7.69%; height: 56px;">
Oslazené cereálie
</td>
<td style="width: 7.69%; height: 56px;">
?okoláda
</td>
<td style="width: 7.69%; height: 56px;">
Kolá?e
</td>
</tr>
<tr style="height: 64px;">
<td style="width: 14.26%; height: 64px;">
?ervený meloun
</td>
<td style="width: 29.76%; height: 64px;">
Kiwi
</td>
<td style="width: 7.76%; height: 64px;">
Ostružiny
</td>
<td style="width: 32.5003%; height: 64px;">
Kedlubna
</td>
<td style="width: 103.27%; height: 64px;">
Okra
</td>
<td style="width: 0.725163%; height: 64px;">
Sojové boby
</td>
<td style="width: 7.68673%; height: 64px;"></td>
<td style="width: 7.69%; height: 64px;">
Zava?ené olivy
</td>
<td style="width: 7.69%; height: 64px;">
Javorový syrup
</td>
<td style="width: 7.69%; height: 64px;">
Pšenice
</td>
<td style="width: 7.69%; height: 64px;">
Müsli a ty?inky
</td>
<td style="width: 7.69%; height: 64px;">
T?stoviny
</td>
<td style="width: 7.69%; height: 64px;">
Dorty
</td>
</tr>
<tr style="height: 56px;">
<td style="width: 14.26%; height: 56px;">
Petržel
</td>
<td style="width: 29.76%; height: 56px;">
Ananas
</td>
<td style="width: 7.76%; height: 56px;">
?erstvé datle
</td>
<td style="width: 32.5003%; height: 56px;">
Tu?ín
</td>
<td style="width: 103.27%; height: 56px;">
Raj?ata
</td>
<td style="width: 0.725163%; height: 56px;">
Sojové mléko
</td>
<td style="width: 7.68673%; height: 56px;"></td>
<td style="width: 7.69%; height: 56px;">
Fazole
</td>
<td style="width: 7.69%; height: 56px;">
Je?ný syrup
</td>
<td style="width: 7.69%; height: 56px;">
Ovesné vlo?ky
</td>
<td style="width: 7.69%; height: 56px;">
Pšeni?né klí?ky
</td>
<td style="width: 7.69%; height: 56px;">
Rýže
</td>
<td style="width: 7.69%; height: 56px;">
Cigarety
</td>
</tr>
<tr style="height: 56px;">
<td class="second_half1" style="width: 14.26%; height: 56px;">
<span style="font-size: 14pt;"><strong>pH 8.5</strong></span>
</td>
<td style="width: 29.76%; height: 56px;">
Stévie
</td>
<td style="width: 7.76%; height: 56px;">
?erstvé fíky
</td>
<td style="width: 32.5003%; height: 56px;">
Kuku?ice
</td>
<td style="width: 103.27%; height: 56px;">
Houby
</td>
<td style="width: 0.725163%; height: 56px;">
Bio sojové produkty
</td>
<td style="width: 7.68673%; height: 56px;"></td>
<td style="width: 7.69%; height: 56px;">
Sušené švestky
</td>
<td style="width: 7.69%; height: 56px;">
Med
</td>
<td style="width: 7.69%; height: 56px;">
Tvrdé sýry
</td>
<td style="width: 7.69%; height: 56px;">
Celozrnný chléb
</td>
<td style="width: 7.69%; height: 56px;">
Krupice
</td>
<td style="width: 7.69%; height: 56px;">
Uzeniny
</td>
</tr>
<tr style="height: 56px;">
<td class="second_half1" style="width: 14.26%; height: 56px;">
?asa agar
</td>
<td style="width: 29.76%; height: 56px;">
Chlorela
</td>
<td style="width: 7.76%; height: 56px;">
Grapefruit
</td>
<td style="width: 32.5003%; height: 56px;">
Tykev
</td>
<td style="width: 103.27%; height: 56px;">
Cibule
</td>
<td style="width: 0.725163%; height: 56px;">
Tofu
</td>
<td style="width: 7.68673%; height: 56px;"></td>
<td style="width: 7.69%; height: 56px;">
Bor?vky
</td>
<td style="width: 7.69%; height: 56px;">
Fruktóza
</td>
<td style="width: 7.69%; height: 56px;">
Tvaroh
</td>
<td style="width: 7.69%; height: 56px;">
Sladká šleha?ka
</td>
<td style="width: 7.69%; height: 56px;">
Pšeni?ný chléb
</td>
<td style="width: 7.69%; height: 56px;">
Masové výrobky
</td>
</tr>
<tr style="height: 56px;">
<td class="second_half1" style="width: 14.26%; height: 56px;">
Cantaloupe
</td>
<td style="width: 29.76%; height: 56px;">
Spirulina
</td>
<td style="width: 7.76%; height: 56px;">
Guava
</td>
<td style="width: 32.5003%; height: 56px;">
Brambory se slupkou
</td>
<td style="width: 103.27%; height: 56px;">
?erstvý kokos
</td>
<td style="width: 0.725163%; height: 56px;">
Tempeh
</td>
<td style="width: 7.68673%; height: 56px;"></td>
<td style="width: 7.69%; height: 56px;">
Sušený kokos
</td>
<td style="width: 7.69%; height: 56px;">
Melasa
</td>
<td style="width: 7.69%; height: 56px;">
Bryndza
</td>
<td style="width: 7.69%; height: 56px;">
Slazené džusy
</td>
<td style="width: 7.69%; height: 56px;">
Pšeni?né pe?ivo
</td>
<td style="width: 7.69%; height: 56px;">
Coca Cola
</td>
</tr>
<tr style="height: 56px;">
<td class="second_half1" style="width: 14.26%; height: 56px;">
Chilli
</td>
<td style="width: 29.76%; height: 56px;">
Syrový hráškový protein
</td>
<td style="width: 7.76%; height: 56px;">
Kaki
</td>
<td style="width: 32.5003%; height: 56px;">
Mladé fazolky
</td>
<td style="width: 103.27%; height: 56px;">
Syrový med
</td>
<td style="width: 0.725163%; height: 56px;">
Nutri?ní droždí
</td>
<td style="width: 7.68673%; height: 56px;"></td>
<td style="width: 7.69%; height: 56px;">
Brusinky
</td>
<td style="width: 7.69%; height: 56px;">
Ho??ice
</td>
<td style="width: 7.69%; height: 56px;">
Ke?up
</td>
<td style="width: 7.69%; height: 56px;">
Slazené jogurty
</td>
<td style="width: 7.69%; height: 56px;">
Bonbóny
</td>
<td class="second_half2" style="width: 7.69%; height: 56px;">
<strong>pH 4</strong>
</td>
</tr>
</tbody>
</table>
</div>Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Erfan Geramian |
| Solution 2 | DesignerWWT |
| Solution 3 |