The text following a table is spilling into the table because it is too big to fit within the designated div

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!

Answer №1

To insert content after a table, utilize the jQuery .append() function on the initial div element.

Answer №2

Perhaps this is the solution you seek.

<div style="width:100%; height:220px;overflow:auto;">
  <table style="width:100%; word-wrap: break-word; table-layout:fixed;">
    <tr>
      <td height="20"><img height="20" src="https://www.gravatar.com/avatar/550cdda1fabb8596d60b256ba1c73b05?s=64&d=identicon&r=PG"></td>
      <td height="20">Carrot</td>
      <td height="20">$9.99</td>
    </tr>
    <tr>
      <td height="20"><img height="20" src="https://www.gravatar.com/avatar/550cdda1fabb8596d60b256ba1c73b05?s=64&d=identicon&r=PG"></td>
      <td height="20">Raspberry</td>
      <td height="20">$3.49</td>
    </tr>
    <tr>
      <td height="20"><img height="20" src="https://www.gravatar.com/avatar/550cdda1fabb8596d60b256ba1c73b05?s=64&d=identicon&r=PG"></td>
      <td height="20">Raspberry</td>
      <td height="20">$3.49</td>
    </tr>
	<!-- Additional repeated entries here for demonstration purposes -->
  </table>      
</div>
<div>test test test test ... (truncated for brevity) ... test test test </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for positioning two fields side by side on a webpage with CSS

I currently have two datepickers aligned vertically and I'm looking to display them in a horizontal layout with some spacing between them. What changes do I need to make in order to present these two calendar pickers side by side on the same row? Cou ...

Ensure that the second ajax call retrieves the first result every time

This is the code snippet I am currently using: <script type="text/javascript> $(function() { $('#DoTask').click(function(event) { event.preventDefault(); // added this $.getJSON('/TareasBackGround/DoTaskInteractivo ...

show a picture and text side by side

Here's the CSS code I'm using: <style type="text/css"> #box { width:100%; height:80px; background-color:#eeeeee; } .box-inner { width:80%; margin:0 auto 0 auto; text-align:center; } #text, #text a { font-siz ...

Trigger the activation of an input field upon clicking an image labeled "edit"

I am currently developing a website where administrators have access to a dashboard page that displays a list of users. I am looking to implement a feature that allows admins to change the roles of other users directly from the same table row. Below is th ...

Is the functionality compatible with all browsers even though <div /> is not recognized as a proper HTML element?

Can the code $("<div />").appendTo($mySelector) be relied upon for safety and cross-browser compatibility, considering that <div /> is not a valid HTML element? I pose this question because it seems much simpler to use than $("<div><d ...

Exploring the Features of Bottom and Right in jQuery

Here is a snippet of jQuery code that I included in a sample program: $('#left').click(function(){ $('.box').animate({ left: "-=40px", }, function(){/* End of Animation*/}); }); $('#right ...

What is the difference between a CSS background image and a default background?

I am faced with a challenge concerning a div element that has both a background color and an image with a transparent background. My objective is to have the default background color of the div be white, while having a different color as the background fo ...

Guide on creating a hand-drawn pencil circle using only CSS!

Is anyone familiar with how to create a hand-drawn pencil circle hover effect using pure CSS, without relying on SVG like the one featured on CodeMyUi? I've seen examples accomplished with SVG, but I'm specifically interested in achieving it usin ...

Encountering an "AJAX not a function" error while using the d3/flask interface

Hey there! I'm new to the world of JavaScript and AJAX. Take a look at this d3 function I've been working on: var node = g.selectAll(".node") .data(root.descendants()) .enter().append("g") .attr("class", function(d) { return "node" + ...

Django views are not receiving multiselect data from Ajax requests

As a newcomer to Django, I am still learning the ropes. One challenge I am facing involves a multiselect list on my webpage. I need to send the selected items to my views for processing, and I attempted to accomplish this using Ajax. However, it seems that ...

Embed the Facebook Share Button using iFrames

I currently have a website that showcases news articles in a list format using PHP and MySQL. You can check it out here: My goal is to incorporate a Facebook share button/link on each article so that users can easily share individual posts on their own Fa ...

Make sure to deselect all other radio buttons when selecting one, running into difficulties

Having an issue with my UI when selecting radio buttons by clicking on a div: A loop that displays different radio buttons: {% for product in collections.regalos.products %} <li class="grid__item large--one-third gift-card"> <div class="gift-s ...

What is the most effective way to toggle the visibility of div elements using jQuery?

I am currently working on a small project centered around interviewing people using short GIF animations. I want the viewers to have 10 seconds to watch the GIF, but I've noticed that the timer is not accurate in my code. After some research, I came ...

Assistance with Ajax for content loading

Greetings, I am encountering an issue with the following code snippet (located in a js file named ajax.js) $(function(){ $("#loading").hide(); $("ul#nav a").click(function(){ page = "content/"+$(this).attr('href') ...

Interacting with a DIV element can also have an impact on the links within

Below is my current CSS code: .contact{ padding:1rem; background:#023B6C; padding:1rem; position:fixed; right:-20px; top:27%; z-index:99; border-radius:5px 5px 0 0; border:2px solid #fff; transform:rotate(-90deg); transition:all .5 e ...

Using Cleave.js to hide the input field in an HTML form

I am currently implementing cleave.js on a website in order to create a mask that restricts input to only a 3-digit number. Here is the snippet of code I am using with cleave.js: <script> let number = new Cleave("#numberId", { ...

Height adjustment for flexbox children

Can someone assist me with marking up a todo list? I am attempting to set the height of div.main-tasks equal to div.tasks so that the former fills the entire latter. Unfortunately, I am unsure how to achieve this. You can refer to the following image for c ...

Display HTML components as JSON data using AngularJS

Recently, I started exploring angular js and faced a challenge in formatting json data with the help of angular js. Below is a snippet of my json data: [ {"field_add_link": "<a href=\"/drupal3/drupal3/\">Home</a>"}, {"field ...

What is the reason that this particular JQuery code is malfunctioning in the IE browser once integrated into my website?

Currently, I am utilizing the DDCharts jQuery plugin from DDCharts JQuery to incorporate some charts into my website. After downloading the plugin and testing it in various browsers, I encountered an issue specifically with Internet Explorer 8+. Strangely, ...

Tips for utilizing mysql_connect(...) on a web hosting platform

Recently, I signed up for a web hosting service and have just started learning PHP and MySQL. I came across this video tutorial https://www.youtube.com/watch?v=gvGb5Z0yMFY which demonstrates how to add a row to a table. In my MySQL database, I have a table ...