rearrange elements in the HTML code

I need to display 3 tables, each with a width of 300px, on a webpage. These tables can be collapsed or visible. My goal is to arrange them so that if only one table is visible, it appears in the center of the page (centrally aligned). Additionally, the tables should adjust their positions based on the size of the screen. For instance, if the screen size is 1300px, all three tables should be displayed horizontally. If the screen size is 700px, two tables should be side by side and the third below them.

What I've attempted:

  1. I've tried wrapping the tables in a container and centering it, but that did not achieve the desired result.
  2. I've also experimented with placing the tables inside another table, but I struggled to position them correctly based on the screen size (resulting in a horizontal scroll when the screen size decreased, which is not ideal).
htmlcssangularjs

Answer №1

Consider utilizing bootstrap for its excellent grid system, ideal for achieving responsive designs. Simply assign classes to elements for easy implementation. Learn more about it at "http://getbootstrap.com/css/"

Answer №2

<div style="margin: 0 auto;width: 95%;">
<div style="display: inline-block; width:300px">
    <table>
      <tr>
        <th>Month</th>
        <th>Savings</th>
      </tr>
      <tr>
        <td>January</td>
        <td>$100</td>
      </tr>
    </table>
</div>
<div style="display: inline-block; width:300px">
    <table>
      <tr>
        <th>Month</th>
        <th>Savings</th>
      </tr>
      <tr>
        <td>January</td>
        <td>$100</td>
      </tr>
    </table>
</div>
<div style="display: inline-block; width:300px">
    <table>
      <tr>
        <th>Month</th>
        <th>Savings</th>
      </tr>
      <tr>
        <td>January</td>
        <td>$100</td>
      </tr>
    </table>
</div>
</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

iPhone Safari Mobile Browser experiencing issues with sms: and mailto: functionalities

Issue: Encountering a problem with web pages containing sms: and mailto: links not functioning on iOS mobile Safari browser. Clicking on the link redirects to: Safari cannot open the page because it cannot redirect to locations starting with "sms:& ...

htmlioshyperlinkmobile-safariios-universal-links

Unable to utilize object functions post-casting操作。

I've encountered an issue while trying to access some methods of my model object as it keeps returning an error stating that the function does not exist. Below is the model class I have created : class Expense { private name: string; private ti ...

javascriptangularjstypescript

Tips for aligning sections of a navigation bar in different directions: left and right

I'm attempting to float a logo to the left side of a nav bar and have the text float to the right of the nav bar using Bootstrap. I've tried adding float and text align classes to outer divs and specific elements but haven't had success yet. ...

htmlbootstrap-4

Dealing with challenges in integrating ngx-masonry with Angular 14

I am currently working with Angular 14 framework and the ngx-masonry library (https://www.npmjs.com/package/ngx-masonry/v/14.0.1). However, I am facing some issues where it is not functioning correctly. I would appreciate any assistance or guidance on how ...

htmlcssangulartypescriptnpm

Guide on creating Jasmine tests for $resource in AngularJS

Trying to get started with defining tests for my angular app, but feeling a bit lost as it's my first time working with testing. I'm specifically interested in setting up Tests with Jasmine for REST Services within my application. My main questi ...

javascriptangularjsunit-testingjasmineangularjs-service

Enhancing Performance with ngView in AngularJS and Retaining Data in Memory

Working on my project, I have been utilizing AngularJS along with ngView. While ngView functions seamlessly in conjunction with ngRoute, I have encountered a situation where upon returning to the previous link, ngView reloads the data again through Ajax. ...

angularjsngrouteng-viewangularjs-ng-route

Display data when clicking on Tailwind

I am currently displaying a sub menu on hover using Tailwind CSS. However, I am wondering how I can achieve the exact same functionality by triggering an onclick event instead of hovering over the menu. Here is a DEMO showcasing the current setup. CODE: ...

javascriptcsstailwind-css

The centrally-aligned flexbox div remains at a fixed size, preventing any text truncation within its nested elements

My goal is to truncate the lengthy text in the span with the id of first-item when the screen size decreases. However, I am encountering an issue where setting margins on the parent element prevents it from shrinking, thus causing the truncation not to wor ...

htmlcssflexbox

Looking to tally up the variety of items in Django?

Before, I had a table with a client summary list. One column showed object types and the other displayed the quantity of each object type. @login_required def client_summary(request, client_id): client = models.Client.objects.get(pk = client_id) i ...

pythonhtmldjangotagscount

Using AngularJS to manage cookies along with arrays

I am passing my data in this way $cookies.putObject("currentLocation,values,allLocList", obj, vm.tempData, vm.allLocationList); The objects obj and vm.tempData are being sent as objects, while vm.allLocationList is an array that contains a JSON object. W ...

javascriptangularjscookies

Unable to view indicators and slides are not transitioning in Bootstrap carousel

I am in the process of developing a website with bootstrap, but I am encountering issues with the carousel feature. Despite copying the code directly from their official page, the carousel remains non-functional. The indicators are missing, and the slides ...

htmlcssbootstrap-5bootstrap-carousel

Tips for aligning 'textarea' and 'a' (button) tags in a single row

<div class="row"> <a class="btn btn btn-success btn-block"><i class="fa fa-thumbs-up"></i>Ok</a> </div> <div class="row"> <textarea name="textareaAxs" ></textarea> <a class="btn btn btn- ...

htmlcssbootstrap-4

Horizontal compression applied to background image

After following a suggestion ("css only technique number 1" found here http://css-tricks.com/perfect-full-page-background-image/), I experimented with using an inline img element and CSS to create a background image that would occupy the entire browser win ...

htmlcssbackground-image

Understanding MUI5 prop handling

Recently, I decided to experiment with Material UI 5 sx props just for fun. I encountered a bit of confusion while trying to replicate the behavior of the previous MUI 4 makeStyles function. Specifically, I was attempting to pass JSS classnames to sx props ...

cssreactjsmaterial-uijsssx

Issue encountered in performing a post request using AngularJS

One of the functions in my code is a post call: save2 : function ( lotto ) { var configDistintaIngrediente = { params: { distintaBaseGelato_id: 1, ingrediente_id: 2, quantit ...

angularjshttppost

The carousel top position in Bootstrap 4 is not functioning properly

I am struggling to get the teal rectangle to move to the top of the carousel. I have set my carousel to have a position relative and my teal rectangle to have a position absolute with top="0", but it doesn't seem to be working properly. Instead of mov ...

cssbootstrap-4

Explore bar with search button

I'm facing an issue with the code I have for searching on my website. Currently, when a user fills in their search word and presses enter, it executes the command. However, I would like to only run the search script when the user clicks a button inste ...

javascriptjqueryhtmlsearch

Rearranging columns - moving the first column to the last position using Bootstrap

Trying to change up the layout of some rows to achieve a specific look: https://i.sstatic.net/GI2QO.png Working with Bootstrap and using a loop to output each row. The current output structure is as follows: <div class="container benefit-containe ...

phpcssbootstrap-4css-selectors

Issue with Proper Display of JSON Unicode Characters in AngularJS

When I receive this JSON array, I am using Angular to display it. Here is a shortened example: $scope.results = [{"description": "\u003ca href=\"http://google.com \" target=\"_blank\"\u003eClick Here\u003c/a&bs ...

jsonangularjsunicodeng-bind-html

Tips for transferring information with the $http GET operation in AngularJS

I am struggling to send the emailId as data from my AngularJS controller to NodeJS. Despite my efforts to find a solution through online search, I have not been successful. Can someone please assist me with this? This is what my controller file looks like ...

angularjsnode.jsexpress