I've been searching for a solution to this issue (it's a common problem), but nothing I've attempted has resolved it. Currently, I am using jQuery Mobile. Below is the code snippet in question:
<div style="width:100%; height:220px;">
<table style="width:100%; word-wrap: break-word; table-layout:fixed;">
<tr>
<td height="20"><img height="20" src="images/Products/Carrot.svg"></td>
<td height="20">Carrot</td>
<td height="20">$9.99</td>
</tr>
<tr>
<td height="20"><img height="20" src="images/Products/Raspberry.svg"></td>
<td height="20">Raspberry</td>
<td height="20">$3.49</td>
</tr>
</table>
</div>
While there are additional table rows with text, omitting them would be repetitive. My objective is to display a compact table that can be scrolled through on a phone screen, along with text displayed below. However, my attempts to place a paragraph in a div outside of the table container result in the paragraph being included within the table and scrolling along with its contents.
Your assistance is greatly appreciated!