Tables: Column w/Auto width disappears on mobile-need min. width

[springvisual]

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.
I host it in a shopify product descriptions, and my template does not allow side scrolling to view all the table with fixed width, that’s why I have to overcome that with auto width, but I need a minimum width that it can’t go under.

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.
A live example is hosted at: https://keyshop-online.com/products/xhorse-...d-tool-xdmo00en

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>

 

[FormulaUAE]

I had a similar issue before. What worked for me was setting a min-width on the important columns and adding overflow-x: auto to the table's container. That way, it stays scrollable on mobile instead of shrinking too much or disappearing.


By the way, I ran into this while building a price table for a car wrapping Dubai website — mobile responsiveness was a must. Give it a shot and see if that helps!