Arranging Check Boxes Side by Side

I am struggling to properly align the three checkboxes and tables next to each other. I have managed to get the checkboxes on the same row, but aligning them neatly has proven to be a challenge. Using Notepad++ as my development tool, I am facing formatting difficulties.

Any assistance would be greatly appreciated.

Below are the CSS and HTML codes. Each checkbox is accompanied by a respective table within this HTML section, separated by comments for 'Scenario 1,2,3 and Main'. 

td.left {
  text-align: left;
}

th {
  border: 1.5px solid #4682B4;
  text-align: center;
  padding: 2px;
}
<!--Scenario 1-->
<form id="checkbox1" method="get" align="left" style="display: inline-block; width:30%;">
  <table style="width:20%" align="left">

    <input type="checkbox" value="select" align="center" id="check1"> Calculate The Number of Head Count When Days Are Fixed<br>

    <tr>
      <td>Number of Days</td>
      <td class="left"><input type="text" id="numDays" /></td>
    </tr>

    <tr>
      <td>Head Count</td>
      <td class="left"><input type="text" name="hc" id="hc" /> Per Shift</td>
    </tr>

  </table>
</form>
<!--End of Form For Scenario 1-->

<!--Scenario 2-->
<form id="checkbox2" method="get" align="left" style="display:inline-block; width:30%;">
  <table style="width:20%" align="left">

    <input type="checkbox" value="select" align="center" id="check2"> Calculate The Number of Days When Head Counts Are Fixed<br>
    <tr>
      <td>Number of Head Count</td>
      <td class="left"><input type="text" id="numHeadC" /></td>
    </tr>

    <tr>
      <td>Number of Days</td>
      <td class="left"><input type="text" name="days" id="days" /> Days</td>
    </tr>

  </table>
</form>
<!--End of Form For Scenario 2-->

<!--Scenario 3-->
<form id="checkbox3" method="get" align="left" style="display: inline-block; width:30%;">
  <table style="width:20%" align="left">

    <input type="checkbox" value="select" align="center"> Calculate The Number of Head Counts According to The Daily Output<br>
    <tr>
      <td>Daily Output</td>
      <td class="left"><input type="text" id="output" /></td>
    </tr>

    <tr>
      <td>Headcount II</td>
      <td class="left"><input type="text" name="hcperday" id="hcperday" /> Per Shift</td>
    </tr>
  </table>
</form>
<!--End of Form For Scenario 3-->
<br><br><br>

<!--Main-->
<form id="radioForm2" method="get" align="center">
  <table style="width:30%" align="center">

    <tr>
      <td>Total</td>
      <td class="left"><input type="text" name="total" id="total" align="center" /> Seconds</td>
    </tr>

    <tr>
      <td>Standard Hour</td>
      <td class="left"><input type="text" name="stdHour" id="stdHour" align="center" /> Hour</td>
    </tr>

    <tr>
      <td>Earn Hour</td>
      <td class="left"><input type="text" name="earnHour" id="earnHour" /> Hour</td>
    </tr>

    <tr>
      <td>Output Per Day</td>
      <td class="left"><input type="text" name="perday" id="perday" /> Per Day</td>
    </tr>

  </table>
</form>
<!--End of Form-->
<br><br><br>

javascripthtmlcss

Answer №1

I have placed the corrected input in an answer to demonstrate the proper format. It is important to note that the comment section is not suitable for including HTML snippets. Despite this, the provided answer did not successfully resolve the view issue.

td.left {
  text-align: left;
}

th {
  border: 1.5px solid #4682B4;
  text-align: center;
  padding: 2px;
}
<!-- Scenario 1 -->
<form id="checkbox1" method="get" align="left" style="display: inline-block; width:30%;">
  <table style="width:20%" align="left">

    <tr>
      <td colspan="2"><input type="checkbox" value="select" align="center" id="check1"> Calculate The Number of Head Count When Days Are Fixed</td>
    </tr>
    <tr>
      <td>Number of Days</td>
      <td class="left"><input type="text" id="numDays" /></td>
    </tr>

    <tr>
      <td>Head Count</td>
      <td class="left"><input type="text" name="hc" id="hc" /> Per Shift</td>
    </tr>

  </table>
</form>
<!-- End of Form For Scenario 1 -->

<!-- Scenario 2 -->
<form id="checkbox2" method="get" align="left" style="display:inline-block; width:30%;">
  <table style="width:20%" align="left">

    <tr>
      <td colspan="2"><input type="checkbox" value="select" align="center" id="check2"> Calculate The Number of Days When Head Counts Are Fixed</td>
    </tr>
    <tr>
      <td>Number of Head Count</td>
      <td class="left"><input type="text" id="numHeadC" /></td>
    </tr>

    <tr>
      <td>Number of Days</td>
      <td class="left"><input type="text" name="days" id="days" /> Days</td>
    </tr>

  </table>
</form>
<!-- End of Form For Scenario 2 -->

<!-- Scenario 3 -->
<form id="checkbox3" method="get" align="left" style="display: inline-block; width:30%;">
  <table style="width:20%" align="left">

    <tr>
      <td colspan="2"><input type="checkbox" value="select" align="center"> Calculate The Number of Head Counts According to The Daily Output</td>
    </tr>
    <tr>
      <td>Daily Output</td>
      <td class="left"><input type="text" id="output" /></td>
    </tr>

    <tr>
      <td>Headcount II</td>
      <td class="left"><input type="text" name="hcperday" id="hcperday" /> Per Shift</td>
    </tr>
  </table>
</form>
<!-- End of Form For Scenario 3 -->
<br><br><br>

<!-- Main -->
<form id="radioForm2" method="get" align="center">
  <table style="width:30%" align="center">

    <tr>
      <td>Total</td>
      <td class="left"><input type="text" name="total" id="total" align="center" /> Seconds</td>
    </tr>

    <tr>
      <td>Standard Hour</td>
      <td class="left"><input type="text" name="stdHour" id="stdHour" align="center" /> Hour</td>
    </tr>

    <tr>
      <td>Earn Hour</td>
      <td class="left"><input type="text" name="earnHour" id="earnHour" /> Hour</td>
    </tr>

    <tr>
      <td>Output Per Day</td>
      <td class="left"><input type="text" name="perday" id="perday" /> Per Day</td>
    </tr>

  </table>
</form>
<!-- End of Form -->
<br><br><br>

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

Error in React Typescript Order Form when recalculating on change

When creating an order form with React TypeScript, users can input the quantity, unit price, and select whether the item is taxable. In this simplified example, only 1 or 2 items can be added, but in the final version, users will be able to add 10-15 item ...

javascriptreactjstypescriptasync-awaitreact-redux

Running a script through the terminal using an electron js application, but the process necessitates the installation of node js

I am currently working on a project that involves running a script through the system terminal using my Electron.js application. However, I am facing an issue with new users who may not be technically proficient and do not have Node.js installed on their s ...

javascriptnode.jsmacosterminalelectron

Decrease the border-radius shorthand mixin, deactivate the variable

I have been working on creating a mixin for border-radius that will only apply when the values, determined by a variable, are greater than or equal to 0. I have set the default value in a variable as 3px, so if I input -1 or 'no', the border-radi ...

variableslessmixinscssshorthand

Accordion menu causing Javascript linking problem

After following a tutorial, I managed to create an accordion menu in JavaScript. In the current setup, each main li with the class "ToggleSubmenu" acts as a category that can hide/show the sub-lis. Now, my query is this: How can I retain the link functio ...

javascriptjquerycssaccordion

How can I update a dropdown menu depending on the selection made in another dropdown using Angular

I am trying to dynamically change the options in one dropdown based on the selection made in another dropdown. ts.file Countries: Array<any> = [ { name: '1st of the month', states: [ {name: '16th of the month&apos ...

javascriptangulartypescript

Instructions on how to present a list of employee information according to the user's gender preference using a selection of three radio buttons

I have developed a view that displays a table of employees, using a json array to store their details in the component. Additionally, I have implemented 3 radio buttons: all, male, and female. My goal is to have the table show all employees when "all" is ...

htmlangulartypescript

Exploring the functionality of utilizing dual loops with v-for in Vue.js

I am facing an issue with my table code where I need to repeat it 6 times to match the day column above. I would like to use v-for and make use of a variable called "count" which represents the number of days. Can someone assist me with this task? <tabl ...

javascriptlaravelvue.jsloopsv-for

Making a linked div with background image

I'm attempting to turn the small icons on this particular page () into clickable links. Each icon is contained within its own div, but no matter what I do: <div class="social-btn pinterest"><a href="http://www.pinterest.com/etc.etc.">&l ...

csshtmlhyperlinkicons

Information failed to load into the datatable

i've implemented this code snippet to utilize ajax for loading data into a datatable. However, I'm encountering an issue where the data is not being loaded into the database. $('#new_table').DataTable({ "processing": true, "ser ...

javascriptjqueryajaxdatatable

Utilizing data attributes and JavaScript to dynamically assign a class to carousel navigation items

Hello there! I recently created a carousel and carousel navigation system using Bootstrap. I am now trying to figure out how to detect the value of 'data-slide-to' and then apply a specific style to the corresponding navigation item based on that ...

javascriptjquerycsstwitter-bootstrap

Encountering an issue with getDerivedStateFromProps in React where an error states: Unable to retrieve property 'setState' of null

Just found out that componentWillReceiveProps is deprecated and now we should be using the getDerivedStateFromProps lifecycle method. You can find more information about it at this link. This is how I'm implementing it: class Main extends Component ...

javascriptreactjsgetderivedstatefromprops

Mongoose - run a function on a designated date within the document

Currently, I am developing a cryptocurrency-based betting game project. My database of choice is mongodb and I utilize mongoose for interaction with it. Within this database, I have a collection that houses documents detailing various betting games. Each d ...

javascriptmongodbexpressmongoose

Ways to mimic an Angular directive with a required field

Recently, I encountered a challenge that involves two directives: directive-a, directive-b. The issue arises because directive-b has a `require: '^directive-a' field, which complicates unit testing. In my unit tests, I used to compile the direc ...

javascriptangularjsunit-testingangular-directive

Having trouble with the API authentication call, receiving a "Failed to load resource: net::ERR_CONNECTION_REFUSED" error message

I am facing an issue with my Vue and .net application. Whenever I run "NPM start serve," it successfully builds the app. The app is running locally at: http://localhost:8080/ However, when I attempt to log in, I encounter the following error: Console err ...

javascriptc#.netvue.jsroutes

Develop a JavaScript application that contains a collection of strings, and efficiently sorts them with a time complexity of O(nlog n)

Seeking assistance in developing a JavaScript program that contains an array of strings and must sort them efficiently in O(nlog n) time. Grateful for any guidance... ...

javascriptarrayssorting

How to locate the position of an element within a multi-dimensional array using TypeScript

My data structure is an array that looks like this: const myArray: number[][] = [[1,2,3],[4,5,6]] I am trying to find the index of a specific element within this multidimensional array. Typically with a 1D array, I would use [1,2,3].indexOf(1) which would ...

javascripttypescript

What is the best method for comparing two JSON objects in AngularJS?

I am working with two JSON objects. $scope.car1={"Sedan":{"Audi":["A4","A3"]},"Hatchback":{"Maruthi":["Swift"]}}; $scope.car2={"Hatchback":{"Maruthi":["Swift"]},"Sedan":{"Audi":["A3","A4"]}}; I have attempted to compare these two objects using the co ...

javascriptjsonangularjs

Searching for an item in an array within MongoDB: Tips and techniques

I am attempting to locate the object containing a specific element within an array: Here is my query: router.get('/', function(req, res) { var userSubscribed = req.user.email; db.posts.find({ "SubscriberList": { $elemMatch: userSubscrib ...

javascriptjsonmongodb

The <a> element does not direct to a different webpage

I designed a single-page layout with multiple sections and added links to the navigation bar for easy access. I also incorporated jQuery for smooth scrolling within the page. However, when I tried linking to other pages, it didn't work properly until ...

jqueryhtml

How to showcase the date in a unique format using Angular

Does anyone know of a JavaScript ES7 method that can convert the output of new Date() into the format shown below? If there isn't a built-in method, I am willing to manually parse or find/replace it myself. 2020-06-30 07.49.28 I would like the da ...

javascriptangulartypescriptmomentjsangular8