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

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.

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

:balloon:Hello! Welcome to the forum!

Your HTML code looks great, and while inline styling (where an element like col has a style attribute assigned) is completely legitimate HTML, it is less than ideal from a maintenance perspective.

I would seriously recommend moving and consolidating your styling in a dedicated css file. To do that, you need to insert a link element in the head section of your root HTML file (usually named index.html) and it should look as follows:

<link rel="stylesheet" href="styles.css">

The value of the href attribute here assumes that the styles.css file is located in the same directory(or folder) as the index.html file.

Once you have that tidied up, your life will be much easier and you can then create and apply media queries to allow for content to appear appropriately, dependant on screen or device size. Check out some of the great information out there regarding media queries.

Does this help?

Happy Coding! :slightly_smiling_face:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.