Printable Version of Topic
Click here to view this topic in its original format
HTMLHelp Forums _ General Web Design _ Tables: Column w/Auto width disappears on mobile-need min. width
Posted by: Spring Nov 9 2023, 05:37 PM
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-mini-obd-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>
Attached File(s)
EN_ON_Key_Cutting_Machine_Comparison_Table.html ( 6.76k )
Number of downloads: 94Posted by: master anny Dec 13 2023, 05:48 AM
Hi
set the column width to 'min-width' and use CSS media queries for mob views.
apply 'position sticky' to make the top row sticky on mobile.
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)