How can I adjust table rows for optimal mobile view?

[Kjankko-US]

Hi Friends,

I have created a table row for my Shopify store. The row uses that code:

<table width="100%">
<tbody>
<tr>
<td style="width: 33.3%;">
<div class="p1" style="text-align: left;">TAMPEREEN LUONTOKAUPPA</div>
<div class="p1" style="text-align: left;">Laukontori 4<br /> 33200 TAMPERE<br /> puh. 03 222 0077</div>
</td>
<td style="width: 33.3%;">
<p class="p1" style="text-align: left;"><br />RUOHONJUURI AINOA<br />Länsituulentie 50<br />02100 Espoo<br />puh. 044 763 9560</p>
 </td>
<td style="width: 33.3%; text-align: center;">
<p class="p1" style="text-align: left;">RUOHONJUURI OY CITYCENTER<br />Keskuskatu 6<br />00100 HELSINKI<br />puh. 020 766 9755</p>
</td>
</tr>
</tbody>

That looks really good on desktop devices, but awful in mobile view. 

My question: How can I set mobile view from 3 rows per line -> to 1 row per line?

URL: https://tervaskanto.myshopify.com/pages/jalleenmyyjat

Password: whawst

[ZestardTech · Accepted solution]

Hello There,

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media screen and (max-width: 767px){
section.entry-content table tbody td {
width: 100% !important;
display: inline-block;
padding: 15px 0;
font-size: 13px;
}

section.entry-content table tbody td p.p1 {
margin: 0;
}

section.entry-content table {
margin: 0;
}

div#shopify-section-footer footer {
margin-top: 0;
padding-top: 0;
}

section.entry-content table tbody td:nth-child(2) p {
display: inline-block;
}

section.entry-content table tbody td:nth-child(2) p br:nth-child(1) {
display: none;
}
}

[Kjankko-US]

It works - thank you soooo much  @ZestardTech !

[ZestardTech]

Kindly feel free to get back to me if you need any further assistance Thanks!

[Mani05]

<tbody id="myTable">
<tr>
<td>2P TRADING S.r.l.</td>
<td>Livia Pardini</td>
<td><a href="mailto:livia@2ptrading.com">livia@2ptrading.com</a></td>
<td>Italy</td>
<td>marble, granite, stones</td>
</tr>
<tr>
<td>A&amp;G 23 S.r.l.</td>
<td>Gian Luca</td>
<td><a href="mailto:gianluca@ag23.net">gianluca@ag23.net</a></td>
<td>Italy</td>
<td>limestone</td>
</tr>
<tr>
<td>AADHAR PRIMEEXIM PRIVATE LTD.</td>
<td>Premesh Bhootra</td>
<td><a href="mailto:premesh@drtcindia.com">premesh@drtcindia.com</a></td>
<td>India</td>
<td>sandstone, marble, granite, slatestone &amp; quartzite</td>
</tr>
<tr>
<td>AAPT DISTRIBUTION PVT LTD</td>
<td>Raman Yuvarajan</td>
<td><a href="mailto:raman@aapt.co.in">raman@aapt.co.in</a></td>
<td>India</td>
<td>granite blocks, slabs, tiles &amp; tombstones</td>
</tr>
<tr>
<td>AARDWOLF INDUSTRIES LLC</td>
<td>Nhan Vien Ky</td>
<td><a href="mailto:nhan@aardwolf.com.vn">nhan@aardwolf.com.vn</a></td>
<td>Vietnam</td>
<td>stone, glass</td>
</tr>
<tr>
<td>A.A.T.C. AND CO. S.r.l.</td>
<td>Richard Branson</td>
<td><a href="mailto:richard.branson@aatc.it">richard.branson@aatc.it</a></td>
<td>Italy</td>
<td>marble &amp; granite</td>
</tr>

This my table code its desktop view good but mobile view not same please suggest me to how fix this am trying your above code also but i cont fix that please give me best solution for this   Thank you