Tips for reducing a table to fit the dimensions of a mobile device

My Bootstrap table design looks great on larger screens like laptops, monitors, and tablets, but the size isn't optimized for phones. I've tried adjusting the width in percentages and pixels, but it's not working out. Any suggestions on how to make the table smaller for mobile devices?

Photo:

https://i.sstatic.net/Qhnbj.jpg

<table class="table">
  <thead>
    <tr>
      <th scope="col">Course No.</th>
      <th scope="col"></th>
      <th scope="col">1</th>
      <th scope="col">2</th>
      <th scope="col">3</th>
      <th scope="col">4</th>
      <th scope="col">5</th>
      <th scope="col">6</th>
      <th scope="col">7</th>
      <th scope="col">8</th>
      <th scope="col">9</th>
      <th scope="col">10</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Course Designations</th>
      <td></td>
      <td>E</td>
      <td>S</td>
      <td>D</td>
      <td>S</td>
      <td>E 7</td>
      <td>E 7</td>
      <td>E</td>
      <td>S</td>
      <td>E 7</td>
      <td>E 7</td>
    </tr>
    <tr>
      <th scope="row">Kołobrzeg Railway Station</th>
      <td>0</td>
      <td>4:45</td>
      <td>5:45</td>
      <td>6:45</td>
      <td>7:45</td>
      <td>8:45</td>
      <td>10:45</td>
      <td>12:55</td>
      <td>14:45</td>
      <td>15:20</td>
      <td>17:15</td>
    </tr>
    <tr>
      <th scope="row">Kołobrzeg Grochow. </th>
      <td>0</td>
      <td>4:45</td>
      <td>5:45</td>
      <td>6:45</td>
      <td>7:45</td>
      <td>8:45</td>
      <td>10:45</td>
      <td>12:55</td>
      <td>14:45</td>
      <td>15:20</td>
      <td>17:15</td>
    </tr>
    // Additional rows go here...
</table>

Answer №1

One way to display a table with scrollbars if it exceeds the viewport is by using an iframe generated with JavaScript. With an iframe, you have control over the width and height, allowing you to show scrollbars when needed.

var iframe = document.createElement('iframe');
var html = '<table class="table">  <thead>    <tr>      <th scope="col">Nr. Kursu</th>      <th scope="col"></th>      <th scope="col">1</th>      <th scope="col">2</th>      <th scope="col">3</th>      <th scope="col">4</th>      <th scope="col">5</th>      <th scope="col">6</th>      <th scope="col">7</th>      <th scope="col">8</th>      <th scope="col">9</th>      <th scope="col">10</th>    </tr>  </thead>  <tbody>   [Table content goes here] </table>';
     iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(html);
     iframe.width = '100%';
     iframe.height = '450px';
     iframe.frameBorder = '0';
     document.body.appendChild(iframe);

If you want to learn more about using custom HTML in an iframe, you can check out this question on Stack Overflow: Creating an iframe with given HTML dynamically

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

Troubleshooting problems with CSS when zooming in and out

My CSS is designed for screen sizes larger than 1100 pixels. However, when I zoom in using ctrl and the plus sign, the center container on the page fails to wrap properly and suddenly breaks. HTML: <div id="outer_footer_bottom"> <div class=" ...

Switch the orientation of a live table moving horizontally to vertically and vice versa

config.previewData = [ { Products:27989, Total Customers:294, Metrics:"MVC", Toner Products:5928, INK Products:22061 }, { Products:56511, Total Customers:376, Metrics:"SMB", ...

How to retrieve the width of a document using jQuery?

Having a strange issue with determining the document width using $(document).width() during $(window).load and $(window).resize. The problem arises when the browser is initially full screen and then resized to a narrower width, causing content to require ...

Numerous elements positioned absolutely are overlapping

I am working on a website with a unique slide layout design. I am currently focusing on two specific slides: https://i.stack.imgur.com/xngF4.png and https://i.stack.imgur.com/W19tJ.png My goal is to include a button on each individual slide, similar to th ...

When the width of the screen is less than 992 pixels, my div will be hidden

I have been working with the bootstrap4 layout, and I noticed that when the screen width is less than 992px, the yellow-div is overlapping the brown-div. Can someone explain why this is happening and suggest a solution? Below is the code snippet: .head ...

An unexpected error has occurred in the browser console: The character '@' is not valid

I recently made the decision to dive into learning about Unit Testing with JavaScript. To aid in this process, I started using both Mocha.js and Chai.js frameworks. I downloaded the latest versions of these frameworks onto my index.html from cdnjs.com. How ...

Searching for a RegEx expression or jQuery selector that will exclude "external" links in the href attribute

I am using a custom jQuery plugin to enable Ajax loading of page content when certain links are clicked. Implementing this is straightforward with a delegated event like $(document).on('click','a', function(){});. However, I want this ...

A guide on implementing input tags through instant search in HTML using AngularJS

As someone new to Angular JS, I am working on adding input tags by clicking from instant search using Angular JS. I came across a helpful example of instant search in action through this demo that Google provided. Now, I want to implement the ability to a ...

Can you explain how to modify the hover color of a word with select letters already colored using CSS?

Changing colors of a link before and during hover state One problem I'm facing is having a link where the first and last letters are red while the ones in between are black. This color combination should remain the same, even if the link has been vis ...

Looking to slide a form on top of an image carousel in Bootstrap - any tips?

How can I move this form over the "carousel"? <html> <head> <title>test</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http ...

The select dropdown default choice is not appearing as expected

My template is not showing the default select option that I have set for one select element. I attempted to achieve this with the following code: <div class="select"> <select (change)="calculaMes(mesEscolhido)" [(ngModel)]="mesEscolhido" na ...

How to exclude elements nested inside another element using CSS or XPath techniques

Presented here is a snippet of XML code: <xml> <section> <element>good</element> <section class="ignored"> <element>bad</element> </section> </section> </xml> Identifying a ...

Enhancing visual aesthetics with Vuetify on v-slot label components

I am working with Vuetify code that appears like this <v-radio-group v-model="gender" column class="radio-group-full-width"> <v-radio value="Boy"> <template v-slot:label> <v-textarea v-model="answer" v-vali ...

Add Your Logo to the Navigation Bar using CSS

Can someone please assist me with adding a logo to my CSS navbar? I am struggling to figure out how to do this and would appreciate any guidance or tips on how to successfully implement a logo in the navbar. body { margin: 0px; } ul { list-style-ty ...

Extract ID for Bootstrap modal display

In my project, I am using a bootstrap modal that displays various strings. The challenge I am facing involves a loop of cards, each with a distinct 'id'. When triggering the modal, I want to show the corresponding id inside the modal itself, whic ...

Guide to adding a theme switcher feature to your current React website

Currently, I am faced with a challenge involving two theme files, theme.js and theme-dark.js, within the context of a complex React-based website. Despite having already set up the site, I am struggling to find a way to allow users to seamlessly switch bet ...

Tips for updating the left positioning of a Div element on the fly

Although my title may not fully explain my goal, I am dealing with dynamically created div elements. When a user triggers an ajax request to delete one of the divs, I want to remove it from the DOM upon success. The issue arises in adjusting the layout aft ...

Is it possible to apply styling to an element based on the position property of its ancestors using only CSS?

Wondering if it's possible to style an element based on its ancestors' CSS property value. Consider the HTML snippet below: <div><!-- ancestor --> <!-- Any number of descendant levels before reaching the target div --> < ...

Developing interactive checkboxes for individual rows through React.js

Within a form, I have rows containing two inputs each. Upon clicking "add", a new row is created. For the second row onwards, by clicking "add" a checkbox labeled 1 should be added to indicate dependency on the previous row. In addition, for the third row, ...

Issue arising from CSS and div elements

I am facing some challenges in making certain divs behave as desired. Take a look at the following references: Link 1: - contains two divs Link 2: - has only one div I am trying to utilize two divs (.content) without them being positioned incorrectly ...