Having difficulty creating a responsive table with Bootstrap

I'm completely new to Bootstrap. Can you help me create a responsive table and make the body content responsive as well?

    <body style="background-color:#F1F3F6 ">
        <div align="center">
        <h1 style="color:#0083CA;">
            <img src="http://www.kerenel.com/img/banner" alt="Alternate Text" /><br />
            Smart Pond
        </h1>
       <div id="currenttime" style="display:none;">

        </div>
        <table class="">
            <tr>
                <td><div id="water-temperature-container" style="float:left; min-height:400; background-color:red;"></div></td>
                <td><div id="ph-container" style="float:left;background-color:red"></div></td>
                <td><div id="do-container" style="background-color:red"></div></td>
            </tr>
        </table>
        Data recorded at Time : <span id="lblDate"></span>


    </div>
</body>
htmlcsstwitter-bootstrap

Answer №1

The .table-responsive class allows tables to be responsive, meaning they will horizontally scroll on smaller devices (less than 768px). However, on larger screens exceeding 768px in width, the table's appearance remains unchanged:

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Simone</td>
        <td>Garcia</td>
        <td>27</td>
      </tr>
      <tr>
        <td>Hiroko</td>
        <td>Tanaka</td>
        <td>40</td>
      </tr>
    </tbody>
  </table>
</div>

Answer №2

Learn How to Create Responsive Tables

To make tables responsive, wrap any existing table with the class .table-responsive. This allows the table to scroll horizontally on smaller devices (less than 768px). On larger screens, there will be no visible difference.

Classes needed:

  • table
  • table-responsive

Example Code

<table class="table table-responsive">
  <tr>
    <td><div id="water-temperature-container" style="float:left; min-height:400; background-color:red;" ></div></td>
    <td><div id="ph-container" style="float:left;background-color:red"></div></td>
    <td><div id="do-container" style="background-color:red"></div></td>
  </tr>
</table>

Code Snippet

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-responsive">
  <tr>
    <td>
      <div id="water-temperature-container" style="float:left; min-height:400; background-color:red;"></div>
    </td>
    <td>
      <div id="ph-container" style="float:left;background-color:red"></div>
    </td>
    <td>
      <div id="do-container" style="background-color:red"></div>
    </td>
  </tr>
</table>

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

What is the best way to iterate through JSON objects stored in a single location?

Currently, I am dealing with a single JSON object structured as follows: Object --> text --> body --> div Array[20] --> 0 Object --> text --> body --> div Array[20] --> 1 Object --> text --> body --> div Array[20] --> . ...

javascripthtmljsonfilefor-loop

How can we allocate array elements dynamically within div elements to ensure that each row contains no more than N items using only HTML and JavaScript?

For instance, if N is 3 in each row, as more elements are added to the array, the number of rows will increase but each row will still have a maximum of 3 elements. I am currently using map to generate corresponding divs for every element in the arr ...

javascripthtmlcss

The fadeOut() method is currently only functioning on the initial item

Recently, I've been experimenting with jQuery and I decided to create a simple to-do list application. However, I encountered an issue with my code. When I check an item that is not the first item on the list, the fadeOut() function does not work prop ...

jqueryhtmlcssbootstrap-4

Utilizing the functionalities of HTML5 in conjunction with XHTML

I am seeking assistance with web programming for a school assignment. My professor has outlined specific requirements for the structure of the website. One of these requirements is that the site must be XHTML compliant (Strict or Transitional). Additionall ...

htmlxhtml

"Guidance on jQuery syntax: Use a textbox to filter out and hide select options with each keystroke

Is there a way to modify my existing code so that it can show or hide elements based on a filter condition, specifically for Internet Explorer? I want to wrap the unmatched elements in a SPAN tag and hide them if the browser is IE, and vice versa by remo ...

javascriptjqueryhtmlsyntax

Creating a flexible Bootstrap 3 layout that responds to the size of a div, not just the screen

Having a web page layout with a main content area and a fixed-width sidebar is proving to be a challenge. I want the content displayed in both sections to be responsive, adjusting based on the size of their respective parent divs rather than the screen siz ...

htmlcsstwitter-bootstrap

Enhancing Blog Navigation with PicoCMS Pagination

After successfully setting up PicoCMS on my website, everything seems to be working well except for the blog pages. I am having issues with the "Older Posts" button not functioning as expected. Unfortunately, I couldn't find any information in the the ...

phpcsshtmlpagination

Radio buttons malfunctioning in Internet Explorer version 11

We are dealing with a web page that has been created by an ASP.NET web application. Within this page, there are multiple sets of radio buttons. Strangely, one of these sets is not functioning properly for certain users. Upon loading the page, the first but ...

htmlasp.netinternet-explorer

HTML5 footer element is the perfect way to add a

I'm currently working on creating a footer that stretches across the entire width of the screen. Originally, I had it nested within the body tag which was centered with a width of 825px. To remove this width constraint, I moved the footer under the ht ...

htmlcssalignment

How to create a full-width and full-height background image in a div using CSS

When using a bootstrap template, I encountered an issue with adding an image as a background. Here is the CSS code: background:url(../images/banner.png) no-repeat; background-size: 100%; The problem with these CSS rules is that the image gets clipped and ...

jqueryhtmlcssimagetwitter-bootstrap

What is the process for activating the appropriate image when clicking on the accordion?

I currently have three accordions on the left side and three images on the right side, but this may grow in the future. My goal is to have the first accordion open and display the first image when the page loads. When the user clicks on the second accordio ...

javascripthtmljquerycss

Changing the color of a checkbox in React JS when it is checked: a step-by-step guide

Is there a way to change the color of the checkbox when it is checked? Right now, my checkbox appears with this color: https://i.sstatic.net/mY9Jg.png However, I am looking to change it to red. Any suggestions on how I can achieve that? <input ...

cssreactjs

Transfer grid lines easily by copying and pasting directly from the webpage into a text document

Is there a way to have the grid lines included when copying grid data from a web page? Currently, the copied result looks like this: name subject lolo math fofo history What I would like is: | name | subject | --------------- | lolo | math ...

htmlcssgridmarkup

What's the best way to customize a partially collapsible Navbar in Bootstrap 4 to display items exactly where I need them to

Is there a way to make a Bootstrap 4 Navbar only partially collapse? I want certain items on the Navbar aligned to the right to always be visible, while the rest of the Navbar items on the left will collapse into a menu when viewed on mobile devices. The ...

csstwitter-bootstrapbootstrap-4

Bootstrap - Input fields not following grid constraints

I have scoured the internet for answers to my question and haven't found anything useful, not even in previous posts on this forum. Currently, I am working on a website for internal company use and tinkering with it at home. However, I seem to be fac ...

javascripthtmltwitter-bootstrapbootstrap-4

Display a button within a table depending on the content of adjacent cells

Below is the code snippet I'm currently working with: <tbody *ngIf="packages"> <tr *ngFor="let package of packages"> <td class='checkbox'> <label class="css-control css-co ...

javascripthtmlangular

Ways to create CSS styles dynamically in PHP using database-driven methods

Currently, I am in the process of developing an application that gives users the ability to select different style options within the app. These choices will then be utilized to create a dynamic web page. I am curious about the various methods available to ...

phpcssstylesheet

Creating vibrant tables with unique color schemes using Thymeleaf

Is there a way to create a table with different colors using Thymeleaf? I have a list of events with risk weights represented by integer values. Each column in the HTML table should be colorized based on certain conditions. For example, if the risk is le ...

javahtmlcssthymeleaf

Is it possible to locate an element using two attributes in C# WebDriver?

Can anyone assist me in finding elements based on their class and the text they contain? I have attempted the following methods without success, so any guidance would be greatly appreciated (I prefer using CSS for selection, but XPath is also acceptable): ...

c#cssseleniumxpath

Incorporating docsify CSS styling into Markdown within the VScode environment

When it comes to building my blog, I've decided to go with docsify and manage my markdown files using VScode. I wanted a preview of my blog, and after noticing that <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/t ...

cssvisual-studio-codemarkdowndocsify