Alignment of Table with Form Section

I need help figuring out how to align a table next to a form section. Here is the layout I am aiming for:

#Form

    Label:  |TextBox|
    Label:  |TextBox|
    Label:  |TextBox|
    Label:  |TextBox|
    --------------------------------------------------------------------
    Label:  |TextBox|                  |-----------  Table  -----------|
    Label:  |TextBox|                  |-------------------------------|
    Label:  |TextBox|                  |-------------------------------|
    Label:  |TextBox|                  |-------------------------------|
    Label:  |TextBox|                  |-------------------------------|
    --------------------------------------------------------------------
    Label:  |TextBox|
    Label:  |TextBox|
    Label:  |TextBox|
    Label:  |TextBox|

    #End of Form

To get a better idea of what I am talking about, you can check out the source code on this Bootply link and make any necessary adjustments.

Any assistance with this layout challenge would be greatly appreciated.

HTML

<form>    
    <div class="form-horizontal">
        <hr>
        <!-- More HTML code here -->
    </form>

htmlcsstwitter-bootstrap

Answer №1

It is recommended to make use of Bootstrap's native grid system for better layout organization. However, if you prefer a simpler markup approach, you can simply float your table within a container element like a div or fieldset:

input {
  display:block;
}
table {
  float: right;
}
<form>
  <fieldset>
    <legend>Group 1</legend>
    <input type="text" name="group1_field1"/>
    <input type="text" name="group1_field2"/>
    <input type="text" name="group1_field3"/>
  </fieldset>
  <fieldset>
    <table>
      <tr>
        <td>table row 1<td>
      </tr>
      <tr>
        <td>table row 2<td>
      </tr>
      <tr>
        <td>table row 3<td>
      </tr>
    </table>
    <legend>Group 2</legend>
    <input type="text" name="group2_field1"/>
    <input type="text" name="group2_field2"/>
    <input type="text" name="group2_field3"/>
  </fieldset>
  <fieldset>
    <legend>Group 3</legend>
    <input type="text" name="group3_field1"/>
    <input type="text" name="group3_field2"/>
    <input type="text" name="group3_field3"/>
  </fieldset>

Answer №2

With L J's assistance, I successfully completed this task.

Within the form, I added an additional row and separated the form section and the table I wanted to display side by side into their own div elements.

Once separated, I assigned each of them their own col-md- value, which resulted in a perfect layout.

To provide a visual representation of my approach:

<form>

    <div class="form-horizontal">

        <div class="row">

          <div class="col-md-6">
            <div class="form-group">
                <label class="control-label col-md-2">Test</label>
                <div class="col-md-10">
                  <input type="text" class="form-control" />
                </div>
            </div>

            <div class="form-group">
                <label class="control-label col-md-2">Test</label>
                <div class="col-md-10">
                  <input type="text" class="form-control" />
                </div>
            </div>
          </div>

          <div class="col-md-6">
            <table class="table table-bordered">
              <caption class="text-center">Limits</caption>
              <tr>
                <td>20 - 29</td>
                <td>22.70%</td>
              </tr>
              <tr>
                <td>30-39</td>
                <td>24.60%</td>
              </tr>
              <tr>
                <td>40-49</td>
                <td>27.60%</td>
              </tr>
              <tr>
                <td>50-59</td>
                <td>30.40%</td>
              </tr>
           </table>
          </div>
        </div>
      </div>

    </form>

For a live demo, visit this Bootply link

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

Retrieve the data attribute from a select box that was created dynamically

Following an AJAX request, I have successfully generated two select boxes: $("#job_id").change(function() { var id = $(this).val(); $.ajax({ url: '', type: 'POST', dataType: 'json', dat ...

javascriptjqueryhtmldrop-down-menu

Automating Indesign with HTML5 and JavaScript through IDML files

I am currently working on automating IDML files. My goal is to display an IDML template in an HTML5 editor. Within the sample.idml file, I have a basic TextFrame containing the text "Hello World." After unzipping the file and navigating to the stories fol ...

javascripthtmlangularjsautomationidml

I am encountering an issue with Angular where the following error message is displayed: "src/app/app.component.html:18:20 - error TS2339: Property 'DepScreen' does not exist on type 'AppComponent'"

This code snippet is from my app.component.html file: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" ...

javascripthtmlangularangular8

Issue with Angular ngFor not updating radio button value when ngModel is set

Hello, I am fairly new to working with Angular and could really use some assistance with a problem I've run into. Essentially, I am receiving an array of objects from an API like this: [{name: "abc", score: 2},{name: ""def, score: ...

javascripthtmlangulartypescriptradio-button

How can I design an avatar image within a button similar to Facebook's style?

I'm currently working on a project that involves adding an avatar and a dropdown menu for account settings to my navigation bar. I've already created the dropdown, but I'm having trouble styling the avatar within the button. The button is ta ...

javascripthtmlcss

The sticky HTML table header feature is functional, however, the header's border disappears while scrolling

Utilizing the react-bootstrap-table2 library in my React project, I added custom CSS to create a sticky top row effect: .table-container { overflow-y: auto; max-height: 500px; } .react-bootstrap-table th { position: sticky; top: -1px; background- ...

htmlcssreactjs

Distinguishing Features of HTML, Canvas, and WebGL

Is there a way to draw images in WebGL with the same quality as HTML, even when downscaled? I've noticed that scaling down images in WebGL results in poor quality compared to HTML. After reading about 'Handling High DPI (Retina) displays in WebGL ...

javascripthtmlimagecanvaswebgl

What is the best way to create a fading footer effect on scroll using jQuery?

Why is my footer not fading in after 1000px like I want it to? Instead, it appears immediately on the screen. I attempted using fadeIn() in jQuery but had no luck. I also tried to make it disappear with fadeOut(), again with no success. Am I missing someth ...

javascripthtmljquerycssfooter

What could be the reason for the unexpected invisibility of the 4px margin on a static div?

I have a straightforward situation where I am using a fixed positioning <div> that spans the entire width with 100% width. It is designed to have a margin of 4px on all sides. However, for some reason, the right side margin is not visible. Can someon ...

htmlcsspositionmargin

Trouble with visibility of Bootstrap navbar collapse button

While creating an application using bootstrap, I encountered a problem with the navigation bar. The issue is that when I resize the page, the links disappear and the toggle button fails to show up. Below is my current navigation bar code: <link rel= ...

htmlcsstwitter-bootstrap

Incorporate new content into a jquery mobile listview on the fly

I'm attempting to use JavaScript to dynamically populate a listview with items. Here is the code I have written: //Function to load data fields for items dynamically function initialiseFields(listViewId){ for(var i = 0; i < 10; i++){ ...

javascripthtml

Restoring the background color to its original shade following alterations made by jQuery

In my table, I have multiple rows with alternating white and grey backgrounds achieved through CSS. .profile tr:nth-child(odd) { background:#eee; } .profile tr:nth-child(even) { background:none; } However, I now want to allow users to select a row ...

jquerycssbackground-color

Interrupt the current with an external factor

I am working with a flexbox layout that currently looks like this: https://i.stack.imgur.com/ULHEk.jpg My main question now is whether there is a way to disrupt the flow externally from the flexbox, so that the blocked element can move to the next positi ...

htmlcssflexboxcss-float

Having issues with CSS list hovering functionality in Google Chrome

One of the challenges I'm facing with my HTML list is that when hovering over each list item, the text along with the bullet point should change color. Here's the structure: <ul> <li>A bullet point</li> <li>Another ...

htmlcsslistgoogle-chrome

Nested flexbox causing Firefox to malfunction in handling overflow-y

I successfully created a layout using CSS3 flexbox that spans 100% width and height. This layout functions properly on IE11, and possibly on IE10 when emulating IE11. Unfortunately, I encountered an issue with Firefox (35.0.1) where the overflow-y propert ...

cssfirefoxoverflowflexbox

The JavaScript function is not functioning properly, whereas another function is working as intended

I have created a HTML form with 2 buttons and a table. Each row in the table consists of a checkbox and 2 text fields. The buttons allow users to add and remove rows from the table. The remove button only applies to rows where their checkbox is checked. T ...

javascripthtmlformshtml-tablerows

Creating a JSON string that contains HTML output from PHP

My PHP code generates JSON output. <?php $html = utf8_encode($gegevens['tekst']); $html = htmlentities($html); //$html = htmlspecialchars($gegevens['tekst'], ENT_QUOTES, 'UTF-8'); echo json_encode(array( 'titel' ...

phpjqueryhtmljson

Using JavaScript, what is the method for inputting values into a window.prompt()?

I've been working on a project that involves scraping basic HTML pages from an internal server at my workplace. When I visit these pages, a popup window similar to a windows.prompt() appears, asking for a username and password with the message "Enter ...

javascriptpythonhtml

Creating an HTML form that resembles StackOverflow's form

I am having an issue with the behavior of my form when inserting multiple tags. I want it to function like the one on this particular website where a scroll bar appears and a new line is created. Is there a way to keep everything on the same row? Check ou ...

javascriptjqueryhtmlcss

What is the best way to make the Nav bar overlap instead of shifting content to the right?

Is there a way to open the nav bar and have it overlap on the right without pushing content to the right? I tried experimenting with position and z-index, but it didn't work. Thank you! Link <div id="mySidebar" class="sidebar" ...

javascripthtmlcssbootstrap-4nav