Hello, I made a few tables using this script, i’m a newbie to CSS and can’t figure out how to make this table’s first column (auto width) viewable in a mobile phone’s portrait view and in narrow browser resolution.
Also would be amazing if someone knows how to make the top row detach, and keep showing on the top part of the table when scrolling past it on mobile to keep the column heads in view.
Thank you so much for any help.
<style type="text/css"><!--
.tg {border-collapse:collapse;border-color:#;border-spacing:0;}
.tg td{background-color:#EBF5FF;border-color:#9ABAD9;border-style:solid;border-width:1px;color:#444;
font-family:Arial, sans-serif;font-size:14px;overflow:hidden;padding:1px 0px;word-break:normal;}
.tg th{background-color:#FFFFFF;border-color:#9ABAD9;border-style:solid;border-width:1px;color:black;
font-family:Arial, sans-serif;font-size:14px;font-weight:normal;overflow:hidden;padding:1px 0px;word-break:normal;}
.tg .tg-j3py{background-color:#D2E8FF;border-color:#000000;text-align:left;vertical-align:top}
.tg .tg-wp8o{border-color:#000000;text-align:center;vertical-align:middle}
.tg .tg-xwyw{border-color:#000000;text-align:center;vertical-align:middle}
.tg .tg-8a48{background-color:#D2E8FF;border-color:#000000;text-align:center;vertical-align:middle}
.tg .tg-73oq{border-color:#000000;text-align:left;vertical-align:top}
.tg .tg-8o2n{border-color:#000000;text-align:right;vertical-align:middle}
--></style><table style="table-layout: fixed; white-space: initial;" class="tg" data-mce-style="undefined;table-layout: fixed; white-space: initial;">
<colgroup> <col style="width: auto;" data-mce-style="width: auto;"> <col style="width: 80px;" data-mce-style="width: 80px;"> <col style="width: 80px;" data-mce-style="width: 80px;"> <col style="width: 80px;" data-mce-style="width: 80px;"> <col style="width: 80px;" data-mce-style="width: 80px;"> </colgroup>
<thead>
<tr><th class="tg-wp8o" >Automatic Key Cutting Machine Comparison</th>
<th class="tg-wp8o" style="width: 79px;">
<p style="margin-bottom: 0;" data-mce-style="margin-bottom: 0;"><a title="Xhorse Dolphin XP005L Automatic Key Cutting Machine" href="/products/dolphin-xp-005l-key-cutting-machine"><img data-mce-fragment="1" alt="" src="https://cdn.shopify.com/s/files/1/0739/7336/7096/files/XP005L_100x100.jpg?v=1699037534" data-mce-src="https://cdn.shopify.com/s/files/1/0739/7336/7096/files/XP005L_100x100.jpg?v=1699037534">Dolphin XP005L</a><br></p>
</th>
<th class="tg-wp8o" style="width: 10px;"><a title="Xhorse Dolphin XP005 Automatic Key Cutting Machine" href="/products/xhorse-dolphin-xp005-automatic-key-cutting-machine"><img data-mce-fragment="1" alt="" src="https://cdn.shopify.com/s/files/1/0739/7336/7096/files/XP005_100x100.jpg?v=1699037759" data-mce-src="https://cdn.shopify.com/s/files/1/0739/7336/7096/files/XP005_100x100.jpg?v=1699037759">Dolphin XP005</a></th>
<th class="tg-wp8o" style="width: 79px;"><a title="XTOOL KNC91 Automatic Key Cutting Machine" href="/products/xtool-knc91-automatic-automotive-key-cutting-machine"><img data-mce-fragment="1" alt="" src="https://cdn.shopify.com/s/files/1/0739/7336/7096/files/XTOOL-KNC91_100x100.jpg?v=1699037793" data-mce-src="https://cdn.shopify.com/s/files/1/0739/7336/7096/files/XTOOL-KNC91_100x100.jpg?v=1699037793">XTOOL KNC91</a></th>
<th class="tg-wp8o" style="width: 148px;"><a title="Xhorse Condor XC-Mini Plus 2 Automatic Key Cutting Machine" href="/products/condor-xc-mini-plus-ii-automatic-cutting-machine"><img data-mce-fragment="1" alt="" src="https://cdn.shopify.com/s/files/1/0739/7336/7096/files/XHORSE-XC-MINI-II_100x100.jpg?v=1699037830" data-mce-src="https://cdn.shopify.com/s/files/1/0739/7336/7096/files/XHORSE-XC-MINI-II_100x100.jpg?v=1699037830">Condor XC-MINI II</a></th></tr>
</thead>
<tbody>
<tr>
<td class="tg-8a48" style="width: 226px;">Net Weight (KG)</td>
<td class="tg-8a48" style="width: 79px;">13</td>
<td class="tg-8a48" style="width: 10px;">15</td>
<td class="tg-8a48" style="width: 79px;">17</td>
<td class="tg-8a48" style="width: 148px;">19</td>
</tr><tr>
<td class="tg-wp8o" style="width: 226px;">Size (MM)</td>
<td class="tg-wp8o" style="width: 79px;">390*220*270</td>
<td class="tg-wp8o" style="width: 10px;">315*218*270</td>
<td class="tg-wp8o" style="width: 79px;">251*421*318</td>
<td class="tg-wp8o" style="width: 148px;">515*480*380</td>
</tr>
<tr>
<td class="tg-8a48" style="width: 226px;">Offline KeyCode Database</td>
<td class="tg-j3py" style="width: 79px;"></td>
<td class="tg-j3py" style="width: 10px;"></td>
<td class="tg-j3py" style="width: 79px;"></td>
<td class="tg-8a48" style="width: 148px;">✔</td>
</tr>
<tr>
<td class="tg-wp8o" style="width: 226px;">Single High/Low Security Clamp</td>
<td class="tg-wp8o" style="width: 79px;">✔</td>
<td class="tg-73oq" style="width: 10px; text-align: center;">Addition</td>
<td class="tg-wp8o" style="width: 79px;">✔</td>
<td class="tg-wp8o" style="width: 148px;">✔</td>
</tr><tr>
<td class="tg-8a48" style="width: 226px;">Built-in Screen</td>
<td class="tg-8a48" style="width: 79px;">✔</td>
<td class="tg-j3py" style="width: 10px;"></td>
<td class="tg-8a48" style="width: 79px;">✔</td>
<td class="tg-8a48" style="width: 148px;">✔</td>
</tr>
<tr>
<td class="tg-wp8o" style="width: 226px;">Controllable by Phone</td>
<td class="tg-wp8o" style="width: 79px;">✔</td>
<td class="tg-wp8o" style="width: 10px;">✔</td>
<td class="tg-73oq" style="width: 79px;"></td>
<td class="tg-wp8o" style="width: 148px;">✔</td>
</tr>
<tr>
<td class="tg-8a48" style="width: 226px;">Portable Battery</td>
<td class="tg-8a48" style="width: 79px;">✔</td>
<td class="tg-8a48" style="width: 10px;">✔</td>
<td class="tg-8a48" style="width: 79px;">✔</td>
<td class="tg-j3py" style="width: 148px;"></td>
</tr>
<tr>
<td class="tg-wp8o" style="width: 226px;">*Can cut FO21/SX9/Crucifix keys</td>
<td class="tg-wp8o" style="width: 79px;">✔</td>
<td class="tg-wp8o" style="width: 10px;">✔</td>
<td class="tg-73oq" style="width: 79px;"></td>
<td class="tg-wp8o" style="width: 148px;">✔</td>
</tr>
<tr><td class="tg-8a48" style="width: 226px;">*Residential key cut-by-code</td>
<td class="tg-j3py" style="width: 79px;"></td>
<td class="tg-j3py" style="width: 10px;"></td>
<td class="tg-j3py" style="width: 79px;"></td>
<td class="tg-8a48" style="width: 148px;">✔</td>
</tr>
<tr>
<td class="tg-wp8o" style="width: 226px;">*Single-Sided key duplication</td>
<td class="tg-wp8o" style="width: 79px;">✔</td>
<td class="tg-wp8o" style="width: 10px;">✔</td>
<td class="tg-73oq" style="width: 79px;"></td>
<td class="tg-wp8o" style="width: 148px;">✔</td>
</tr>
<tr>
<td class="tg-8a48" style="width: 226px;">Manufacturer's Warranty</td>
<td class="tg-8a48" style="width: 79px;">1 Year</td>
<td class="tg-8a48" style="width: 10px;">1 Year</td>
<td class="tg-8a48" style="width: 79px;">1 Year</td>
<td class="tg-8a48" style="width: 148px;">3 Years</td>
</tr>
<tr>
<td rowspan="2" colspan="2" class="tg-8o2n" style="width: 305px;">*Adapters for special keys sold seperately:<br>
</td>
<td colspan="3" class="tg-73oq" style="width: 237px;">(Single-Sided)Xhorse: M3(FO21+SX9)/M4</td>
</tr>
<tr>
<td colspan="3" class="tg-j3py" style="width: 237px;">XTOOL: K3_FO21/K3_SX9</td>
</tr>
</tbody>
</table>
1 Like
PaulOB
November 10, 2023, 12:53pm
2
Can the html be changed or does it have to be exactly as you have shown.?
To make a table scrollable you need to add a wrapper div to the table and then that can allow to scroll the table sideways.
You could then use position:sticky to stick the left column and the top row and allow scrolling within the table.
I’m not sure if that’s what you were asking but i have a very old demo showing those points.
If that’s the sort of thing you want then I’ll see if your code can be adapted but it will require html changes to achieve.
PaulOB
November 10, 2023, 1:53pm
3
I just had a quick play around but whether this works or not is really dependent on the context in which you place the table. If the context is not correct then it may not be possible to achieve.
This example scrolls vertically and horizontally (when required).
Wow thank you so much!
Maybe there is a different trick to implement this feature?
example: https://keyshop-online.com/products/autel-ultra
PaulOB
November 10, 2023, 6:24pm
5
I think in that context that’s about the best you can hope for. There are too many wrappers for position:sticky on the top row to work properly. The sideways scrolling is working ok.
Position:sticky works on the nearest context and scrolls within that context. However where the table is placed presently is in a context that only contains the table so in essence there is nowhere for anything to scroll. Unfortunately I can’t see an easy fix for that doesn’t mess up your design or require scripting.
You could simply add a height to the table for small screen and that would allow it to scroll within that height.
e.g.
@media screen and (max-width:600px){
.table-wrapper{
height:300px;
max-height:100vh;
overflow:auto;
}
}
Alternatively you could completely recode the table so that you linearise it for small screen but would be a lot of work. Here’s an old example of mine and you need to resize the screen to smaller to see the final effect.
http://www.pmob.co.uk/temp2/table-fixed-head-foot4.html
It works by duplicating headers into the pseudo elements so needs to be set up that way to start with and is not really ideal for a dynamic table unless you are programming it yourself.
Please excuse me, but I don’t know how to implement your addition to the css, when I add it in the bottom, or with .tg it doesn’t effect, would you be kind enough to put it in for me so I can learn?
Again sorry for my ignorance, trying to learn
PaulOB
November 10, 2023, 7:07pm
7
You can just add it to the end of your style block that you have above the table.
<style type="text/css"><!--
.tg {
border-collapse: collapse;
border-color: #;
border-spacing: 0;
}
.tg td {
background-color: #ebf5ff;
border-color: #9abad9;
border-style: solid;
border-width: 1px;
color: #444;
font-family: Arial, sans-serif;
font-size: 14px;
overflow: hidden;
padding: 1px 0px;
word-break: normal;
}
.tg th {
background-color: #ffffff;
border-color: #9abad9;
border-style: solid;
border-width: 1px;
color: black;
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: normal;
overflow: hidden;
padding: 1px 0px;
word-break: normal;
}
.tg .tg-j3py {
background-color: #d2e8ff;
border-color: #000000;
text-align: left;
vertical-align: top;
}
.tg .tg-wp8o {
border-color: #000000;
text-align: center;
vertical-align: middle;
}
.tg .tg-xwyw {
border-color: #000000;
text-align: center;
vertical-align: middle;
}
.tg .tg-8a48 {
background-color: #d2e8ff;
border-color: #000000;
text-align: center;
vertical-align: middle;
}
.tg .tg-73oq {
border-color: #000000;
text-align: left;
vertical-align: top;
}
.tg .tg-8o2n {
border-color: #000000;
text-align: right;
vertical-align: middle;
}
/* Extra code added below only */
html,
body {
margin: 0;
padding: 0;
}
.tg {
position: relative;
width: 100%;
max-width: 1280px;
table-layout: auto;
z-index: 1;
margin: auto;
border-collapse: separate;
border-spacing: 0;
}
.tg thead th {
background: white;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 3;
border-bottom: 2px solid #000;
}
.tg thead th img {
display: block;
margin: auto;
width: 50%;
max-width: 100px;
height: auto;
}
.tg thead th a {
display: block;
}
.tg th,
.tg td {
width: auto !important;
}
.tg tr > .tg-8a48:first-child,
.tg tr > .tg-wp8o:first-child {
min-width: 220px;
position: -webkit-sticky;
position: sticky;
left: 0;
z-index: 2;
border-right: 2px solid #000;
}
.tg thead tr > .tg-wp8o:first-child {
z-index: 4;
}
/* code added here */
@media screen and (max-width:600px){
.table-wrapper{
height:300px;
max-height:100vh;
overflow:auto;
}
}
--></style>
I’m not sure it’s the best solution though.
You should also probably hide the overflow on the medium screen version as its too wide here.
Add another line after that block above and set table-wrapper to overflow:auto.
e.g.
No worries. The problem is that what you want to achieve is very difficult to do and you can’t always shoe-horn code into an existing layout to make something happen. Sometimes it has to be built with the end effect in mind that allows it to work like you want.
Sticky table headers and columns have always been extremely difficult to implement unfortunately.
(Going offline now but back tomorrow
PaulOB
November 10, 2023, 8:20pm
8
Before I go and just as an experiment I would have probably (and roughly) tried to code the table like this if starting form scratch.
It’s probably not feasible for you at this stage as the html needs to be carefully adjusted and if dynamic needs to follow the same pattern.
At widths of 600px (using container queries) the table is linearised.
Amazingly with some adjustment, I got it to be PERFECT in portrait and desktop! thank you so much!
Only thing left to possibly add is to allow the top column to scroll down on Mobile-Landscape, would you happen to know how to achieve that?
This is the first time I asked for help, and my god, every post you make here blows my mind!
Regarding the last experiment, it looks great for a “whole page” object instead of inside a product description, I will defiantly take advantage of it! thank you so much for showing me how to include it into my table!
2 Likes
PaulOB
November 10, 2023, 8:39pm
10
You could try using a new media query based on height and then change the top:0 to a value that suits.
I’m on a mobile at the moment so can’t test but back tomorrow.
Again I really really appreciate your help!
Right now the top row scrolling only activates in lower resolutions, can’t it be activated in all resolutions? regardless of device?
PaulOB
November 11, 2023, 11:46am
12
Yes just remove the rule from inside the media query.
e.g.
You have this:
@media screen and (max-width:600px){
.table-wrapper{
height:645px;
max-height:100vh;
overflow:auto;
}
}
Instead remove that and just do this:
.table-wrapper{
height:645px;
max-height:100vh;
overflow:auto;
}
I think the height:645px is maybe a bit tall and something like 450px might be better and roughly match the size of the box above.
PaulOB:
table-wrapper
Hey Paul, thanks again for all the help, removing the @media screen and (max-width:600px) made it look strange, but changing to max-width:1500px was good enough.
However after getting multiple tables into multiple websites (all of which worked fine), suddenly the side column stopped scrolling left and right on 1 of the websites… do you happen to know how to fix it? -I compared backups the theme css and nothing changed, maybe there is a different way to achieve this? again thank so soo much
example 1 working: keyshop-online.com/products/autel-ultra
example 1 not working: keyshop-il.myshopify.com/products/autel-ultra
example 2 not working: /products/xhorse-mini-obd-tool-xdmo00en
example 3 not working: /products/dolphin-xp-005l-key-cutting-machine
css in theme.css file (same on both websites)
@media screen and (min-width: 1000px) {
.table-wrapper {
white-space: normal;
overflow: auto;
}
}
@media screen and (max-width:1500px){
.table-wrapper{
height:645px;
max-height:100vh;
overflow:auto;
}
}Table: (same on both websites)
<style type="text/css"><!--
.tg {
border-collapse: collapse;
border-color: #;
border-spacing: 0;
}
.tg td {
background-color: #ebf5ff;
border-color: #9abad9;
border-style: solid;
border-width: 1px;
color: #444;
font-family: Arial, sans-serif;
font-size: 12px;
overflow: hidden;
padding: 1px 0px;
word-break: normal;
}
.tg th {
background-color: #ffffff;
border-color: #9abad9;
border-style: solid;
border-width: 1px;
color: black;
font-family: Arial, sans-serif;
font-size: 12px;
font-weight: normal;
overflow: hidden;
padding: 1px 0px;
word-break: normal;
}
.tg .tg-j3py {
background-color: #d2e8ff;
border-color: #000000;
text-align: left;
vertical-align: top;
}
.tg .tg-wp8o {
border-color: #000000;
text-align: center;
vertical-align: middle;
padding-left: 1px;
padding-right: 1px;
padding-top: px;
padding-bottom: 0px;
}
.tg .tg-xwyw {
border-color: #000000;
text-align: center;
vertical-align: middle;
}
.tg .tg-8a48 {
background-color: #d2e8ff;
border-color: #000000;
text-align: center;
vertical-align: middle;
}
.tg .tg-73oq {
border-color: #000000;
text-align: left;
vertical-align: top;
}
.tg .tg-8o2n {
border-color: #000000;
text-align: right;
vertical-align: middle;
}
/* Extra code added below only */
html,
body {
margin: 0;
padding: 0;
}
.tg {
position: relative;
width: 100%;
max-width: 1280px;
table-layout: auto;
z-index: 1;
margin: auto;
border-collapse: separate;
border-spacing: 0;
}
.tg thead th {
background: white;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 3;
border-bottom: 1px solid #000;
}
.tg thead th img {
display: block;
margin: auto;
width: 100%;
max-width: 100px;
height: auto;
}
.tg thead th a {
display: block;
}
.tg th,
.tg td {
width: auto !important;
}
.tg tr > .tg-8a48:first-child,
.tg tr > .tg-wp8o:first-child {
min-width: 205px;
position: -webkit-sticky;
position: sticky;
left: 0;
z-index: 2;
border-right: 1px solid #000;
}
.tg thead tr > .tg-wp8o:first-child {
z-index: 4;
}
--></style><table class="tg" >
<thead>
<tr><th class="tg-wp8o" >השוואת מכשירי דיאגנוסטיקה</th>
<th class="tg-wp8o" style="width: 79px;vertical-align:bottom;"><a title="Xhorse Key Tool Plus Advanced key programming device" href="/products/xhorse-vvdi-key-tool-plus-pad-gl-version"><img data-mce-fragment="1" alt="" src="https://cdn.shopify.com/s/files/1/0739/7336/7096/files/KeytoolPlus_100x100.jpg?v=1699459734" data-mce-src="https://cdn.shopify.com/s/files/1/0739/7336/7096/files/KeytoolPlus_100x100.jpg?v=1699459734">Zenith<BR>Z5</a></th>
<th class="tg-wp8o" style="width: 10px;vertical-align:bottom;"><a title="Xhorse Key Tool Max Pro - Key Progamming and Generating Device" href="/products/xhorse-vvdi-key-tool-max-pro-remote-programmer-immo-prog-immo-date-tool"><img data-mce-fragment="1" alt="" src="https://cdn.shopify.com/s/files/1/0739/7336/7096/files/KeyToolMaxPro_100x100.jpg?v=1699459808" data-mce-src="https://cdn.shopify.com/s/files/1/0739/7336/7096/files/KeyToolMaxPro_100x100.jpg?v=1699459808">Autel<BR>Ultra</a></th>
<th class="tg-wp8o" style="width: 79px;vertical-align:bottom;"><a title="Xhorse Mini OBD Bluetooth Key Programming Device" href="/products/xhorse-mini-obd-tool-xdmo00en"><img data-mce-fragment="1" alt="" src="https://cdn.shopify.com/s/files/1/0739/7336/7096/files/MiniOBD_100x100.jpg?v=1699459838" data-mce-src="https://cdn.shopify.com/s/files/1/0739/7336/7096/files/MiniOBD_100x100.jpg?v=1699459838">Autel<BR>IM608II</a></th>
<th class="tg-wp8o" style="width: 148px;vertical-align:bottom;"><a title="AUTEL KM100 Key Programmer and Universal Remote Generator" href="/products/autel-maxiim-km100-immo-key-programmer"><img data-mce-fragment="1" alt="" src="https://cdn.shopify.com/s/files/1/0739/7336/7096/files/KM100_100x100.jpg?v=1699480252" data-mce-src="https://cdn.shopify.com/s/files/1/0739/7336/7096/files/KM100_100x100.jpg?v=1699480252">Autel<BR>IM508S</a></th>
<th class="tg-wp8o" style="width: 10px;vertical-align:bottom;"><a title="Xhorse Key Tool Max Pro - Key Progamming and Generating Device" href="/products/xhorse-vvdi-key-tool-max-pro-remote-programmer-immo-prog-immo-date-tool"><img data-mce-fragment="1" alt="" src="https://cdn.shopify.com/s/files/1/0739/7336/7096/files/KeyToolMaxPro_100x100.jpg?v=1699459808" data-mce-src="https://cdn.shopify.com/s/files/1/0739/7336/7096/files/KeyToolMaxPro_100x100.jpg?v=1699459808">Topdon<BR>Max</a></th>
<th class="tg-wp8o" style="width: 79px;vertical-align:bottom;"><a title="Xhorse Mini OBD Bluetooth Key Programming Device" href="/products/xhorse-mini-obd-tool-xdmo00en"><img data-mce-fragment="1" alt="" src="https://cdn.shopify.com/s/files/1/0739/7336/7096/files/MiniOBD_100x100.jpg?v=1699459838" data-mce-src="https://cdn.shopify.com/s/files/1/0739/7336/7096/files/MiniOBD_100x100.jpg?v=1699459838">Topdon<BR>Smart</a></th>
<th class="tg-wp8o" style="width: 148px;vertical-align:bottom;"><a title="AUTEL KM100 Key Programmer and Universal Remote Generator" href="/products/autel-maxiim-km100-immo-key-programmer"><img data-mce-fragment="1" alt="" src="https://cdn.shopify.com/s/files/1/0739/7336/7096/files/KM100_100x100.jpg?v=1699480252" data-mce-src="https://cdn.shopify.com/s/files/1/0739/7336/7096/files/KM100_100x100.jpg?v=1699480252">Topdon<BR>Elite</a></th>
<th class="tg-wp8o" style="width: 148px;vertical-align:bottom;"><a title="KEYDIY KD MATE Toyota/Lexus Smart Key Programmer" href="/products/kd-mate-toyota-lexus-all-years-akl-add-key-programmer-inc-8a-4a-bypass-cables"><img data-mce-fragment="1" alt="" src="https://cdn.shopify.com/s/files/1/0739/7336/7096/files/KDMATEplusBA_100x100.jpg?v=1699475851" data-mce-src="https://cdn.shopify.com/s/files/1/0739/7336/7096/files/KDMATEplusBA_100x100.jpg?v=1699475851">Obdstar<BR>DPplus</a></th></tr>
</thead>
<tbody>
<tr><td class="tg-8a48" style="width: 226px;">קידוד מפתחות למרצדס</td>
<td class="tg-8a48" style="width: 79px;text-align:center;vertical-align:middle;"></td>
<td class="tg-8a48" style="width: 10px;text-align:center;vertical-align:middle;"></td>
<td class="tg-8a48" style="width: 79px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-8a48" style="width: 148px;text-align:center;vertical-align:middle;">XP400</td>
<td class="tg-8a48" style="width: 148px;text-align:center;vertical-align:middle;">T-Ninja Box</td>
<td class="tg-8a48" style="width: 79px;text-align:center;vertical-align:middle;">T-Ninja Box</td>
<td class="tg-8a48" style="width: 148px;text-align:center;vertical-align:middle;">T-Ninja Box</td>
<td class="tg-8a48" style="width: 148px;text-align:center;vertical-align:middle;"></td>
</tr>
<tr><td class="tg-wp8o" style="width: 226px;">קידוד מפתחות עם תמיכה נרחבת לרוב סוגי הרכבים בשוק</td>
<td class="tg-wp8o" style="width: 79px;text-align:center;vertical-align:middle;"></td>
<td class="tg-wp8o" style="width: 10px;text-align:center;vertical-align:middle;"></td>
<td class="tg-wp8o" style="width: 79px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-wp8o" style="width: 148px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-wp8o" style="width: 148px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-wp8o" style="width: 79px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-wp8o" style="width: 148px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-wp8o" style="width: 148px;text-align:center;vertical-align:middle;">✔</td>
</tr>
<tr><td class="tg-8a48" style="width: 226px;">קריאה ומחיקת תקלות רכב (DTC)</td>
<td class="tg-8a48" style="width: 79px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-8a48" style="width: 10px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-8a48" style="width: 79px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-8a48" style="width: 79px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-8a48" style="width: 148px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-8a48" style="width: 79px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-8a48" style="width: 79px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-8a48" style="width: 148px;text-align:center;vertical-align:middle;">✔*</td>
</tr>
<tr><td class="tg-wp8o" style="width: 226px;">הצגת תקלות רכב (DTC) במפה טופולוגית צבעונית</td>
<td class="tg-wp8o" style="width: 79px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-wp8o" style="width: 10px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-wp8o" style="width: 79px;text-align:center;vertical-align:middle;"></td>
<td class="tg-wp8o" style="width: 79px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-wp8o" style="width: 148px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-wp8o" style="width: 79px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-wp8o" style="width: 79px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-wp8o" style="width: 148px;text-align:center;vertical-align:middle;"></td>
</tr>
<tr><td class="tg-8a48" style="width: 226px;"><b>תכנות/קידוד למודולות הרכב בענן (Online) עם תמיכה ב-מרצדס ב.אמ.וו פולקסווגן אוודי סקודה לנד רובר יגואר פורשה רנו ניסאן אינפיניטי סובארו יונדאי קיה גרייט וול ג'י.איי.סי אמ.ג'י ו-ג'ילי</b></td>
<td class="tg-8a48" style="width: 79px;text-align:center;vertical-align:middle;"></td>
<td class="tg-8a48" style="width: 10px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-8a48" style="width: 79px;text-align:center;vertical-align:middle;"></td>
<td class="tg-8a48" style="width: 79px;text-align:center;vertical-align:middle;"></td>
<td class="tg-8a48" style="width: 148px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-8a48" style="width: 79px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-8a48" style="width: 79px;text-align:center;vertical-align:middle;">1/2 מהיכולות של ה-Smart וה-Max</td>
<td class="tg-8a48" style="width: 148px;text-align:center;vertical-align:middle;"></td>
</tr>
<tr><td class="tg-wp8o" style="width: 226px;">תכנות לא מבוסס ענן (Offline) לפורד, מאזדה, אופל, ויגואר</td>
<td class="tg-wp8o" style="width: 79px;text-align:center;vertical-align:middle;"></td>
<td class="tg-wp8o" style="width: 10px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-wp8o" style="width: 79px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-wp8o" style="width: 79px;text-align:center;vertical-align:middle;"></td>
<td class="tg-wp8o" style="width: 148px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-wp8o" style="width: 79px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-wp8o" style="width: 79px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-wp8o" style="width: 148px;text-align:center;vertical-align:middle;">✔*</td>
</tr>
<tr><td class="tg-8a48" style="width: 226px;">התאמת רוב רכיבי האימובילייזר לרכב</td>
<td class="tg-8a48" style="width: 79px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-8a48" style="width: 10px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-8a48" style="width: 79px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-8a48" style="width: 79px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-8a48" style="width: 148px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-8a48" style="width: 79px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-8a48" style="width: 79px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-8a48" style="width: 148px;text-align:center;vertical-align:middle;">✔*</td>
</tr>
<tr><td class="tg-wp8o" style="width: 226px;">שכפול מחשבי רכב (Cloning)</td>
<td class="tg-wp8o" style="width: 79px;text-align:center;vertical-align:middle;"></td>
<td class="tg-wp8o" style="width: 10px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-wp8o" style="width: 79px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-wp8o" style="width: 79px;text-align:center;vertical-align:middle;">XP400</td>
<td class="tg-wp8o" style="width: 148px;text-align:center;vertical-align:middle;">T-Ninja Box</td>
<td class="tg-wp8o" style="width: 79px;text-align:center;vertical-align:middle;">T-Ninja Box</td>
<td class="tg-wp8o" style="width: 79px;text-align:center;vertical-align:middle;">T-Ninja Box</td>
<td class="tg-wp8o" style="width: 148px;text-align:center;vertical-align:middle;">P003*</td>
</tr>
<tr><td class="tg-8a48" style="width: 226px;">דיאגנוסטיקה לרכבי טסלה (טופדון גם מקודד מפתחות)</td>
<td class="tg-8a48" style="width: 79px;text-align:center;vertical-align:middle;"></td>
<td class="tg-8a48" style="width: 10px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-8a48" style="width: 79px;text-align:center;vertical-align:middle;"></td>
<td class="tg-8a48" style="width: 79px;text-align:center;vertical-align:middle;"></td>
<td class="tg-8a48" style="width: 148px;text-align:center;vertical-align:middle;">מנוי</td>
<td class="tg-8a48" style="width: 79px;text-align:center;vertical-align:middle;">מנוי</td>
<td class="tg-8a48" style="width: 79px;text-align:center;vertical-align:middle;">מנוי</td>
<td class="tg-8a48" style="width: 148px;text-align:center;vertical-align:middle;"></td>
</tr>
<tr><td class="tg-wp8o" style="width: 226px;">דיאגנוסטיקה למשאיות</td>
<td class="tg-wp8o" style="width: 79px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-wp8o" style="width: 10px;text-align:center;vertical-align:middle;"></td>
<td class="tg-wp8o" style="width: 79px;text-align:center;vertical-align:middle;"></td>
<td class="tg-wp8o" style="width: 79px;text-align:center;vertical-align:middle;">מנוי</td>
<td class="tg-wp8o" style="width: 148px;text-align:center;vertical-align:middle;"></td>
<td class="tg-wp8o" style="width: 79px;text-align:center;vertical-align:middle;"></td>
<td class="tg-wp8o" style="width: 79px;text-align:center;vertical-align:middle;"></td>
<td class="tg-wp8o" style="width: 148px;text-align:center;vertical-align:middle;"></td>
</tr>
<tr><td class="tg-8a48" style="width: 226px;">דיאגנוסטיקה לאופנועים (*קידוד מפתחות כלול במכשיר הבסיסי)</td>
<td class="tg-8a48" style="width: 79px;text-align:center;vertical-align:middle;"></td>
<td class="tg-8a48" style="width: 10px;text-align:center;vertical-align:middle;"></td>
<td class="tg-8a48" style="width: 79px;text-align:center;vertical-align:middle;"></td>
<td class="tg-8a48" style="width: 148px;text-align:center;vertical-align:middle;"></td>
<td class="tg-8a48" style="width: 148px;text-align:center;vertical-align:middle;"></td>
<td class="tg-8a48" style="width: 79px;text-align:center;vertical-align:middle;"></td>
<td class="tg-8a48" style="width: 148px;text-align:center;vertical-align:middle;"></td>
<td class="tg-8a48" style="width: 148px;text-align:center;vertical-align:middle;">✔*</td>
</tr>
<tr><td class="tg-wp8o" style="width: 226px;">ערכת דיאגנוסטיקה לרכבים חשמליים</td>
<td class="tg-wp8o" style="width: 79px;text-align:center;vertical-align:middle;"></td>
<td class="tg-wp8o" style="width: 10px;text-align:center;vertical-align:middle;">תוספת</td>
<td class="tg-wp8o" style="width: 79px;text-align:center;vertical-align:middle;"></td>
<td class="tg-wp8o" style="width: 79px;text-align:center;vertical-align:middle;"></td>
<td class="tg-wp8o" style="width: 148px;text-align:center;vertical-align:middle;">צפוי בעתיד</td>
<td class="tg-wp8o" style="width: 79px;text-align:center;vertical-align:middle;">צפוי בעתיד</td>
<td class="tg-wp8o" style="width: 79px;text-align:center;vertical-align:middle;"></td>
<td class="tg-wp8o" style="width: 148px;text-align:center;vertical-align:middle;"></td>
</tr>
<tr><td class="tg-8a48" style="width: 226px;">כולל אוסצילוסקופ לבדיקת מעגלי חשמל</td>
<td class="tg-8a48" style="width: 79px;text-align:center;vertical-align:middle;"></td>
<td class="tg-8a48" style="width: 10px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-8a48" style="width: 79px;text-align:center;vertical-align:middle;">תוספת</td>
<td class="tg-8a48" style="width: 148px;text-align:center;vertical-align:middle;">תוספת</td>
<td class="tg-8a48" style="width: 148px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-8a48" style="width: 79px;text-align:center;vertical-align:middle;">תוספת</td>
<td class="tg-8a48" style="width: 148px;text-align:center;vertical-align:middle;">תוספת</td>
<td class="tg-8a48" style="width: 148px;text-align:center;vertical-align:middle;"></td>
</tr>
<tr><td class="tg-wp8o" style="width: 226px;"><b>קבלת תכנות/קידוד לכל צורך מרחוק ע"י מומחים בתשלום</b></td>
<td class="tg-wp8o" style="width: 79px;text-align:center;vertical-align:middle;"></td>
<td class="tg-wp8o" style="width: 10px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-wp8o" style="width: 79px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-wp8o" style="width: 79px;text-align:center;vertical-align:middle;"></td>
<td class="tg-wp8o" style="width: 148px;text-align:center;vertical-align:middle;"></td>
<td class="tg-wp8o" style="width: 79px;text-align:center;vertical-align:middle;"></td>
<td class="tg-wp8o" style="width: 79px;text-align:center;vertical-align:middle;"></td>
<td class="tg-wp8o" style="width: 148px;text-align:center;vertical-align:middle;"></td>
</tr>
<tr><td class="tg-8a48" style="width: 226px;">שליטה דו-כיוונית/הפעלת רכיבי רכב (Active Test)</td>
<td class="tg-8a48" style="width: 79px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-8a48" style="width: 10px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-8a48" style="width: 79px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-8a48" style="width: 148px;text-align:center;vertical-align:middle;"></td>
<td class="tg-8a48" style="width: 148px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-8a48" style="width: 79px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-8a48" style="width: 148px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-8a48" style="width: 148px;text-align:center;vertical-align:middle;">✔*</td>
</tr>
<tr><td class="tg-wp8o" style="width: 226px;">איפוס מנורות תחזוקה (Service Reset)</td>
<td class="tg-wp8o" style="width: 79px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-wp8o" style="width: 10px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-wp8o" style="width: 79px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-wp8o" style="width: 79px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-wp8o" style="width: 148px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-wp8o" style="width: 79px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-wp8o" style="width: 79px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-wp8o" style="width: 148px;text-align:center;vertical-align:middle;">✔*</td>
</tr>
<tr><td class="tg-8a48" style="width: 226px;">קריאת ציפים:תיקון קילומטראז'/קידוד מפתחות/איפוס כריות אוויר*</td>
<td class="tg-8a48" style="width: 79px;text-align:center;vertical-align:middle;"></td>
<td class="tg-8a48" style="width: 10px;text-align:center;vertical-align:middle;"></td>
<td class="tg-8a48" style="width: 79px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-8a48" style="width: 148px;text-align:center;vertical-align:middle;">XP400</td>
<td class="tg-8a48" style="width: 148px;text-align:center;vertical-align:middle;">T-Ninja Box</td>
<td class="tg-8a48" style="width: 79px;text-align:center;vertical-align:middle;">T-Ninja Box</td>
<td class="tg-8a48" style="width: 148px;text-align:center;vertical-align:middle;">T-Ninja Box</td>
<td class="tg-8a48" style="width: 148px;text-align:center;vertical-align:middle;">P004*</td>
</tr>
<tr><td class="tg-wp8o" style="width: 226px;">J2534/DoIP/CAN-FD-שימוש בתוכנות יצרן מהמחשב עם ה-VCI </td>
<td class="tg-wp8o" style="width: 79px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-wp8o" style="width: 10px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-wp8o" style="width: 79px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-wp8o" style="width: 79px;text-align:center;vertical-align:middle;"></td>
<td class="tg-wp8o" style="width: 148px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-wp8o" style="width: 79px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-wp8o" style="width: 79px;text-align:center;vertical-align:middle;">✔</td>
<td class="tg-wp8o" style="width: 148px;text-align:center;vertical-align:middle;"></td>
</tr>
<tr><td class="tg-8a48" style="width: 226px;">עלות מנוי שנתי (המחיר משתנה-להמחשה בלבד)[**קיימת הנחה לשנתיים]</td>
<td class="tg-8a48" style="width: 79px;text-align:center;vertical-align:middle;">450$</td>
<td class="tg-8a48" style="width: 10px;text-align:center;vertical-align:middle;">1300$</td>
<td class="tg-8a48" style="width: 79px;text-align:center;vertical-align:middle;">895$</td>
<td class="tg-8a48" style="width: 148px;text-align:center;vertical-align:middle;">345$</td>
<td class="tg-8a48" style="width: 148px;text-align:center;vertical-align:middle;">1300$**</td>
<td class="tg-8a48" style="width: 79px;text-align:center;vertical-align:middle;">1300$**</td>
<td class="tg-8a48" style="width: 148px;text-align:center;vertical-align:middle;">900$</td>
<td class="tg-8a48" style="width: 148px;text-align:center;vertical-align:middle;">300$*</td>
</tr>
<tr><td class="tg-wp8o" style="width: 226px;">שנות מנוי הנכללים במכשיר חדש</td>
<td class="tg-wp8o" style="width: 79px;text-align:center;vertical-align:middle;">2</td>
<td class="tg-wp8o" style="width: 10px;text-align:center;vertical-align:middle;">2</td>
<td class="tg-wp8o" style="width: 79px;text-align:center;vertical-align:middle;">2</td>
<td class="tg-wp8o" style="width: 79px;text-align:center;vertical-align:middle;">2</td>
<td class="tg-wp8o" style="width: 148px;text-align:center;vertical-align:middle;">2 רכב/1 משאית</td>
<td class="tg-wp8o" style="width: 79px;text-align:center;vertical-align:middle;">2</td>
<td class="tg-wp8o" style="width: 79px;text-align:center;vertical-align:middle;">2</td>
<td class="tg-wp8o" style="width: 148px;text-align:center;vertical-align:middle;">1</td>
</tr>
</tbody>
</table>
PaulOB
November 13, 2023, 7:26pm
14
Then you probably have done something wrong. I’m guessing you forgot to remove the closing brace of the media query. All a media query does is restrict styles to a certain range. If you remove the media query itself then the rules should apply everywhere.
e.g.
@media screen and (min-width: 1000px) {/* remove this top line only */
.table-wrapper {
white-space: normal;
overflow: auto;
}
} /* --------- this bracket is the closing media query which is also to be removed */
In CSS one stray bracket may break a whole site.
What about browsers bigger than 1500px? Mine goes up to 2500px so I don’t get any scrolling now.
That means only browsers larger than 1000px so browsers lower than that don’t get those rules.
Now you’ve targeted less than 1500px so you now have multiple rules for between 1000px and 1500px range and then the default rules that apply everywhere else.
That’s why I suggest you get rid of those specific media queries and give everyone the scroll effect.
e.g. Just this and no media queries.
.table-wrapper{
height:645px;
max-height:100vh;
overflow:auto;
}
The only media queries for that effect may be to change the height if needed on smaller screens
It doesn’t scroll sideways on any of those if the page is wide enough that the columns don’t need to scroll. You can’t sideways scroll if there is nothing to scroll to and indeed there would be no need to scroll.
Hope that makes sense
Removing:
@media screen and (min-width: 1000px) {
.table-wrapper {
white-space: normal;
overflow: auto;
}
}
@media screen and (max-width:1500px){
.table-wrapper{
height:645px;
max-height:100vh;
overflow:auto;
}
}
and putting instead the one without @meidia restricts the table to a small viewing section, on big enough screens that can view the all table there’s no need for a scrolling top column, but they do need a side column if the width is higher than the description area. (my concern is mostly because it makes the table smaller by including the height/width scrolling graphic, and doesn’t have a dynamic table height size based on the resolution’s max viewable height)
I verified many times if I missed brackets {} but thats not the case, i’m really lost for words on why it broke, maybe the .table-wrapper can be changed to a different name? there must be some kind of background script that’s overwritting some portion of the css.
PaulOB
November 13, 2023, 9:16pm
16
That is unlikely to be the problem and I saw no other styles applied to that when I looked so I wouldn’t change it just yet.
Both those previous examples you posted seemed to me to be working when the page was at the correct widths. As I said your media queries didn’t make sense and depending on where you opened your browser things would be different.
That was controlled by the height. If you removed the height there is no scroll. That’s why I said you may need to change height based on screen width if you do or don’t want the vertical scroll.
The table should automatically scroll sideways if there is not enough room to view it. If it doesn’t then yes there probably is something missing. It may be that you omitted some of the sticky code but you seem to have taken the pages down now so I can’t check.
** Sorry I’m just going offline now until tomorrow** afternoon but if you can put up a page where you say its not working (just the one page please as I don’t want to be confused with multiple links) then I’ll take a look and see what’s missing.
I think you probably just mixed up a few rules somewhere.
PaulOB
November 14, 2023, 8:41am
18
I’m not back until this afternoon but remember that in a right to left environment then the sticky element in the table would need to be at right:0 and not left:0.
Back this afternoon.
PaulOB
November 14, 2023, 1:35pm
19
Or alternatively you could use the logical css properties and get rid of left and right and instead use inset-inline-start:0 which means the start in of the line in either ltr or rtl environments so you don’t need to change the css.
The right instead of left was exactly the answer!!! thank you so much!
Say, is there a way to disable the table height limitation (verticle top column scrolling) for higher height resolutions?
)
