What's new
HTML Forums | An HTML and CSS Coding Community

Welcome to HTMLForums; home of web development discussion! Please sign in or register your free account to get involved. Once registered you will be able to connect with other members, send and receive private messages, reply to topics and create your very own. Our registration process is hassle-free and takes no time at all!

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

springvisual

New member
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.
Code:
<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>
 
Back
Top