How to Make Responsive Tables and Images?

When a table contains many columns, we need a y-axis scroll bar for users to see all the information in the table. Or, when an image contains a lot of information that we want to display for users to see, we a y-axis scroll bar. The responsive image is often used when we want to use a long math formula.

In both cases, we can create a responsive table or image with a y-axis scroll bar.

Here is how I do it:

  1. Wrap a table or image in a div tag and set its width to 100% and overflow to scroll.
  2. Set the targe table or image to a width that can comfortably display all information.
  3. If doing the above is not working, the y-axis scroll bar does not show up, try add a max-width with the same width with "width", because some website themes or CSS frameworks set max-width to 100% to all images.

Responsive Design

The responsive functionalilty is achieved by seting the width for a table or an image to a fixed size (not a percentage) so that a y-axis scroll bar shows up when a user view the table or  the image with a device of a relatively small screen, while the scroll bar is not present otherwise.

Responsive Table

XXXXX YYYYY ZZZZZ XXXXX YYYYY ZZZZZ XXXXX YYYYY ZZZZZ XXXXX YYYYY ZZZZZ XXXXX YYYYY ZZZZZ XXXXX YYYYY ZZZZZ XXXXX YYYYY ZZZZZ XXXXX YYYYY ZZZZZ
12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345
67890 67890 67890 67890 67890 67890 67890 67890 67890 67890 67890 67890 67890 67890 67890 67890 67890 67890 67890 67890 67890 67890 67890 67890

Responsive Image


Sample code

<div style="overflow: scroll; width: 100%;">
<table style="width: 200%;">
  <tbody><tr>
    <th>XXXXX</th>
    <th>YYYYY</th>
    <th>ZZZZZ</th>
     <th>XXXXX</th>
    <th>YYYYY</th>
    <th>ZZZZZ</th>
     <th>XXXXX</th>
    <th>YYYYY</th>
    <th>ZZZZZ</th>
     <th>XXXXX</th>
    <th>YYYYY</th>
    <th>ZZZZZ</th>
     <th>XXXXX</th>
    <th>YYYYY</th>
    <th>ZZZZZ</th>
     <th>XXXXX</th>
    <th>YYYYY</th>
    <th>ZZZZZ</th>
     <th>XXXXX</th>
    <th>YYYYY</th>
    <th>ZZZZZ</th>
     <th>XXXXX</th>
    <th>YYYYY</th>
    <th>ZZZZZ</th>
  </tr>
  <tr>
    <td>12345</td>
    <td>12345</td>
    <td>12345</td>
     <td>12345</td>
    <td>12345</td>
    <td>12345</td>
     <td>12345</td>
    <td>12345</td>
    <td>12345</td>
      <td>12345</td>
    <td>12345</td>
    <td>12345</td>
     <td>12345</td>
    <td>12345</td>
    <td>12345</td>
     <td>12345</td>
    <td>12345</td>
    <td>12345</td>
     <td>12345</td>
    <td>12345</td>
    <td>12345</td>
      <td>12345</td>
    <td>12345</td>
    <td>12345</td>
  </tr>
  <tr>
    <td>67890</td>
    <td>67890</td>
    <td>67890</td>
     <td>67890</td>
    <td>67890</td>
    <td>67890</td>
     <td>67890</td>
    <td>67890</td>
    <td>67890</td>
     <td>67890</td>
    <td>67890</td>
    <td>67890</td>
    <td>67890</td>
    <td>67890</td>
    <td>67890</td>
     <td>67890</td>
    <td>67890</td>
    <td>67890</td>
     <td>67890</td>
    <td>67890</td>
    <td>67890</td>
     <td>67890</td>
    <td>67890</td>
    <td>67890</td>
  </tr>
</tbody></table>
</div>

<div style="overflow: scroll; width: 100%;">
<img height="66" src="https://blogger.googleusercontent.com/img/a/AVvXsEiRecakAxMGMLGgQIdH8UeNjQbUrCSfpqWi2wdjkcJCNPk07wKdGvxoPR_7mUfi9RjPgr05paoXAjOW2C9l3_9aVBDmpmjCGVdfObFoNsxmEbU-UWWASsD2ONzkdZQ-FXxF-fc4CTJSbsfRaWc3OoVlw2lHt_fRzPibQl0YW_stU5UNIoDIrsSw4_lL=s320" width="150%" />
</div>

Now If you want to maka a table that with bigger screen, there is no scroll, and there is one if sreen sizes are small as being responsive to screen size, you can set the table or image width with pixels not a percentage with min-width CSS property.

Adjust browser or use different devices to see effect.
XXXXX YYYYY ZZZZZ XXXXX YYYYY ZZZZZ XXXXX YYYYY ZZZZZ XXXXX YYYYY ZZZZZ XXXXX YYYYY ZZZZZ XXXXX YYYYY ZZZZZ XXXXX YYYYY ZZZZZ XXXXX YYYYY ZZZZZ
12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345 12345
67890 67890 67890 67890 67890 67890 67890 67890 67890 67890 67890 67890 67890 67890 67890 67890 67890 67890 67890 67890 67890 67890 67890 67890

Responsive Image

<div style="overflow: scroll;">
<table style="min-width: 700px;">
  <tbody><tr>
    <th>XXXXX</th>
    <th>YYYYY</th>
    <th>ZZZZZ</th>
     <th>XXXXX</th>
    <th>YYYYY</th>
    <th>ZZZZZ</th>
     <th>XXXXX</th>
    <th>YYYYY</th>
    <th>ZZZZZ</th>
     <th>XXXXX</th>
    <th>YYYYY</th>
    <th>ZZZZZ</th>
     <th>XXXXX</th>
    <th>YYYYY</th>
    <th>ZZZZZ</th>
     <th>XXXXX</th>
    <th>YYYYY</th>
    <th>ZZZZZ</th>
     <th>XXXXX</th>
    <th>YYYYY</th>
    <th>ZZZZZ</th>
     <th>XXXXX</th>
    <th>YYYYY</th>
    <th>ZZZZZ</th>
  </tr>
  <tr>
    <td>12345</td>
    <td>12345</td>
    <td>12345</td>
     <td>12345</td>
    <td>12345</td>
    <td>12345</td>
     <td>12345</td>
    <td>12345</td>
    <td>12345</td>
      <td>12345</td>
    <td>12345</td>
    <td>12345</td>
     <td>12345</td>
    <td>12345</td>
    <td>12345</td>
     <td>12345</td>
    <td>12345</td>
    <td>12345</td>
     <td>12345</td>
    <td>12345</td>
    <td>12345</td>
      <td>12345</td>
    <td>12345</td>
    <td>12345</td>
  </tr>
  <tr>
    <td>67890</td>
    <td>67890</td>
    <td>67890</td>
     <td>67890</td>
    <td>67890</td>
    <td>67890</td>
     <td>67890</td>
    <td>67890</td>
    <td>67890</td>
     <td>67890</td>
    <td>67890</td>
    <td>67890</td>
    <td>67890</td>
    <td>67890</td>
    <td>67890</td>
     <td>67890</td>
    <td>67890</td>
    <td>67890</td>
     <td>67890</td>
    <td>67890</td>
    <td>67890</td>
     <td>67890</td>
    <td>67890</td>
    <td>67890</td>
  </tr>
</tbody></table>
</div>

<div style="overflow: scroll;">
  <div style="min-width: 700px;">
	<img src="https://blogger.googleusercontent.com/img/a/AVvXsEiRecakAxMGMLGgQIdH8UeNjQbUrCSfpqWi2wdjkcJCNPk07wKdGvxoPR_7mUfi9RjPgr05paoXAjOW2C9l3_9aVBDmpmjCGVdfObFoNsxmEbU-UWWASsD2ONzkdZQ-FXxF-fc4CTJSbsfRaWc3OoVlw2lHt_fRzPibQl0YW_stU5UNIoDIrsSw4_lL=s320" style="width: 1400px;" />
	</div>
</div>

Comments

Post a Comment

Popular posts from this blog

How to Make A Reusable Image Slideshow HTML Component With Vanilla JavaScript

Image
The image slide show I am making has no animation. The mechanism for displaying different slide is by using the display CSS property. The image with display none will not show, while the one with display block will. I will start build one that relys on HTML code then I will build one that relys on JavaScipt that renders the slide show onto the webpage. HTML Slideshow Setup A HTML image slide show can follow the following logic: An image is shown and the others are hidden, by defining the CSS display property to "block" to show and "none" to hide. An index is used to control the CSS display property of each slide with the initial index of 1. On initiation, all image tags for the slide show will be given the CSS property correspoding to whether it's shown or not. A left arrow and a right arrow are used to control the index with onclick event handlers. In order to position the left and right control...
Read more

HTML Tags and Inline CSS that Work In Plotly.js Title

When we create a plot object with Plotly.js, we throw in 3 basic parameters in the Plotly object which are the plot container id, data and layout, like this one: Plotly.newPlot('myDiv', data, layout); And in the layont object, there is a property, called title. The title property can be defined with an string, which will simply be just the title text that is going to display on the top of the plot.  I want to style my chart title when I use Plotly.js.; var layout = { title:`Plot Title` } Or in the text object within the title property. var layout = { title:{text:`Plot Title`} } Plot;y'js has some built-in title properties which we can use to style the title, sush as font color, family, size, padding, and position with x or y. var layout = { title: { text:'Plot Title', font: { family: 'Courier New, monospace', size: 24 }, xref: 'paper', x: 0.05, } }; Problems But I want to add a HTML tag...
Read more

How to Type Spaces In HTML Input And Display In the Browser

Image
When we type a space in an input and use it in JavaScript. The space will be recorded as text just like regular texts. Type In Multiple Spaces When we type some text with many spaces and displays the text in the browser, muiltple spaces will be parsed into one space, if they are connected. Type some text with spaces here: <input oninput="show_1.innerHTML = this.value" /><br /> <div id="show_1"></div> What does JavaScript Do to the Spaces? JavaScript does nothing to the spaces. It preservs all the spaces we type. The following code converts spaces into the letter "a". Space is represnted by \x20 in JavaScript. Type some text with spaces here: <input oninput="show_2.innerHTML = this.value.replace(/\x20/g,'a');" /><br /> <div id="show_2"></div> Why doesn't the Spaces Show in the Browser? Because the connected spaces are parsed into one space in HTML. ...
Read more