Position tables on the right side of adjacent tables

  • There are two tables named id="BFCategories" and "BMICategories".

  • Additionally, there are two other tables with id="BFTable" and "BMITable"

  • BFCategories should come after BFTable, while BMICategories should follow BMITable.

How can I adjust the positioning of BFCategories and BMICategories to be aligned on the right side of BFTable and BMITable? Picture reference:

https://i.stack.imgur.com/cXB4O.png

This HTML code pertains to my current view under asp.net MVC5 :


<h1>Calculate</h1>
<hr />
<h2>BMI</h2>

<form>

    <table id="BMITable">
        <tr>
            <td align="right"><b>Weight:</b></td>
            <td align="left"><div class="col-xs-5"><input type="text" name="Weight" class="form-control" id="Weight" /></div><b>kg</b></td>
        </tr>
        ...
      
      <p>(valid data within the form)</p>
       
    </table>

    <table id="BMICategories">
        
      	<p>(specific category information)</p>
        
    </table>


    <h2>BF% (approximate)</h2>

    <form>

    <table id="BFTable">
    
        &(information regarding gender specifics)
       
   
        <tr>
            ...

           <p>(measurement details for BF % calculation)</p>

          
            
          }

        }  

    </table>

  	<table class="cinfoT" width="320" align="left" id="BFCategories">
        
  		 <tr><td class="cinfoHd"><b>Description</b></td><...
		
  	</table>

    </form>
	
  };
  


  }

Answer №1

If you're unsure about how to use the bootstrap code, take a look at the bootstrap documentation. Understanding this will greatly enhance your design work in the future.

table {
  width: 50%;
  float: left;
}
<h1>Calculate</h1>
    <hr />
    <h2>BMI</h2>

    <form>


        <table id="BMITable">

            <tr>
                <td align="right"><b>Weight:</b></td>
                <td align="left"><input type="text" name="Weight" class="form-control" id="Weight" /><b>kg</b></td>
            </tr>
            <tr>
                <td align="right"><b>Height:</b></td>
                <td align="left"><input type="text" name="Height" class="form-control" id="Height" /><b>cm</b></td>
            </tr>
            <tr>
                <td align="right"><b>BMI:</b></td>
                <td align="left"><input type="text" name="BMI" class="form-control" id="BMIBox" /></td>
            </tr>
            <tr>
            <td colspan='2'>
            <input type="button" value="Calculate" class="btn btn-default" id="CalculateBMI" /></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

How can I improve a gif's background for optimal viewing on mobile devices?

Hey there! I'm facing an issue with a gif running as the background on my website. On my phone, the whole screen isn't filled up and there's just a black space halfway down. You can check it out at . Do you know how to make the gif take up t ...

What causes my code to break completely when I import something?

My chrome extension has a simple function that retrieves a user's selected text using the Chrome Tabs API. I am looking to integrate a Hugging Face API in the future, but I am facing an issue. Whenever I try to import the necessary model, the Chrome T ...

How about connecting functions in JavaScript?

I'm looking to create a custom function that will add an item to my localStorage object. For example: alert(localStorage.getItem('names').addItem('Bill').getItem('names')); The initial method is getItem, which retrieves ...

Achieving Text Centering in kableExtra Cells with CSS: A Step-by-Step Guide

Recently, I received a helpful solution that involved using the extra_css = argument in cell_spec() from the kableExtra package. This allowed me to fill the entire cell of my table instead of just the text inside it. However, even after specifying align = ...

Using JavaScript to interact with elements inside an iframe on a webpage

In a simple scenario, I am experiencing incorrect results. Code snippet from MyFrame.HTML: <!DOCTYPE html> <html> <head> <title>My Frame</title> </head> <body> <a href="https://www.google.com& ...

Arrange DIV elements sequentially with HTML, JQuery, and CSS

Live Demo: Live Demo HTML: <div class="target"> <img src="bg-clock.png" alt="jQuery" /> </div> <div class="target2"> <img src="bg-clock.png" alt="jQuery" /> </div> CSS: .target, .target2 { ...

Using Jquery to add elements one by one

Here is the Code for my project: Displayed below is the content of my CSV file: Item, Quantity, Price; LED, 100, $10; PIR, 1, $5; DS18B20, 10, $5; This segment showcases the jquery file I've composed: $(document).ready(function() { $.ajax({ ...

Utilizing CSS3 to apply a customized background color to every set of three table rows

Is it possible to achieve what I want using CSS3 without Javascript? I've experimented with nth-child and nth-of-type, but couldn't get it to work. I have three table rows that I want to give a background color to, but the table rows beneath them ...

Mastering the art of transitioning between DIV elements

I am looking to implement a rotating three-card display on click, and have come up with the following code: $('.box1').click(function(){ $('.box1').toggleClass('removeanimate'); $(this).toggleClass('go'); ...

"Bootstrap is functioning properly on my local environment, but it seems to

Utilizing the MVC framework and bootstrap has been successful for optimizing my website locally. However, when I upload it to the server, none of the CSS is being rendered. Additionally, the front page, meant to be a carousel slider, appears as a vertical ...

An adaptive Bootstrap grid that collapses and changes based on screen dimensions

Currently, I am in the process of creating a collapsible grid using Bootstrap to display details for each item: If you would like to see a visual representation of the concept, click here. To assist in my project, I have been referring to a helpful threa ...

Develop adaptable flex items

I am working with a container element that contains variable child elements whose width I want to scale. To see an example of what I'm trying to achieve, take a look at this simple plunker: https://plnkr.co/edit/ef0AGPsK7FJJyBqgWuMi?p=preview When ...

Conceal the PayPal Button

Currently, I'm facing a challenge where I need to dynamically show or hide a PayPal button based on the status of my switch. The issue is that once the PayPal button is displayed, it remains visible even if the switch is toggled back to credit card pa ...

In Google Chrome, the edges of hexagons appear jagged and not smooth

I have encountered an issue in Chrome where I created a hexagon group using HTML and CSS. While it displays fine in Firefox, the edges of the hexagons appear distorted in Chrome. Here are my code snippets: HTML <div class="col-sm-12 margin-left-100" i ...

Creating a responsive button inside a table can be achieved effortlessly with Angular Material table components

Help needed to ensure button responsiveness within a table. Here's how it appears on desktop and mobile screens: Desktop View Mobile View The delete button is somewhat obscured in the mobile view. This is the corresponding HTML code: <div ...

In Firefox, the image width may vary compared to the one that was originally inserted

Greetings to all! I have encountered an issue while using jcrop with Firefox as my browser. It seems that the image size does not match the actual dimensions, allow me to elaborate. The image appears to be 20% larger than its displayed size, despite being ...

Creating a data visualization in JavaScript or jQuery without relying on pre-built graph libraries

Hey there, I could really use some assistance. Does anyone know if it's possible to create a line graph in JavaScript or jQuery without relying on any external libraries? It doesn't have to be visually stunning, just functional. If you have any i ...

Running a loop in jQuery to cycle through specified array sets: A step-by-step guide

After attempting to utilize jQuery & Arrays to construct a recurring logic, I have encountered difficulties with ensuring that the code reruns. My intention is for the code to proceed to the next array within the matrix whenever the user selects "Next Butt ...

Is there a way to ensure a Javascript alert appears just one time and never again?

I struggle with Javascript, but I have a specific task that needs to be completed. I am participating in a school competition and need an alert to appear only once throughout the entire project, not just once per browsing session. The alert will inform ...

The code for styling the borders of links is not functioning as expected

I'm currently in the process of creating a buttoned-link feature. The aim is to incorporate a border around the link with an outset style, while having the border-style change to inset when the link is active using a:active and border-style: inset. A ...