What is the best way to align three tables columns in a single row?

I am facing an issue with aligning the columns of three different tables in one line. I have tried applying CSS styling, but the columns still appear misaligned. How can I ensure that the columns are properly arranged in a single line?

Below are my HTML/CSS codes:

.calculated-value td {
  border: none;
}

div#time-div {
  margin-left: -4%;
  margin-right: -4%;
}

table.calculated-value tr td:first-child {
  border: none;
}

table.calculated-value tbody tr td:first-child h4 {
  font-weight: 300;
  letter-spacing: 3px;
}

table.calculated-value tbody tr td:not(:first-child) {
  font-weight: 600;
}

.calculated-value-title {
  letter-spacing: 5px;
  font-weight: 600 !important;
}

tr#time-row td {
  background-color: #22356d;
  width: 30px !important;
  text-align: left;
}

tr#time-row td:first-child {
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  text-align: center;
}

tr#time-row td:last-child {
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
}
<div class="row">
  <div class="col-md-9 offset-md-1" id="report-tables-container">
    <h4 class="text-center text-white font-weigh-bold calculated-value-title">FAIR MARKET VALUE </h4>
    <table class="table table-center text-white text-center calculated-value">
      <tbody>
        <tr>
          <td>
            <h4>INSTALLED</h4>
          </td>
          <td> 100
            <br>$149,350</td>
          <td> 100%
            <br>$149,350</td>
          <td> 100%
            <br>$149,350</td>

        </tr>
        <tr>
          <td>
            <h4>EXCHANGE</h4>
          </td>
          <td> 100
            <br>$149,350</td>
          <td> 100%
            <br>$149,350</td>

        </tr>
      </tbody>
    </table>
    <div id="time-div">
      <table class="table table-center text-white text-center text-strong font-weight-bold calculated-value">
        <tbody>
          <tr id="time-row">
            <td>TIME (MONTHS)</td>
            <td> 0</td>
            <td> 12</td>
            <td> 24</td>

          </tr>
        </tbody>
      </table>

    </div>
    <h4 class="text-center text-white font-weight-bold calculated-value-title">LIQUIDATION VALUE</h4>
    <table class="table table-left text-white text-center calculated-value">
      <tbody>

        <tr>
          <td>
            <h4>ORDERLY</h4>
          </td>
          <td> 100
            <br>$149,350</td>
          <td> 100%
            <br>$149,350</td>
        </tr>
        <tr>
          <td>
            <h4>FORCED</h4>
          </td>
          <td> 100
            <br>$149,350</td>
          <td> 100%
            <br>$149,350</td>
          <td> 100%
            <br>$149,350</td>

        </tr>

      </tbody>
    </table>
  </div>
</div>

Refer to this image.

https://i.sstatic.net/KQtlQ.png

htmlcsshtml-table

Answer №1

Interconnected tables do not automatically align with each other; CSS is the solution to achieve a consistent appearance. Here's a basic example of how to accomplish this:

table {
  width: 100%;
}

th {
  text-align: left;
}

td {
  width: 9%;
}

td:first-child {
  width: auto;
}
<table>
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
        <th>Age</th>
        <th>Age</th>
        <th>Age</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Very long long long long long name</td>
        <td>Smith</td>
        <td>50</td>
        <td>50</td>
        <td>50</td>
        <td>50</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
        <td>94</td>
        <td>94</td>
        <td>94</td>
        <td>94</td>
    </tr>
    <tr>
        <td>John</td>
        <td>Doe</td>
        <td>80</td>
        <td>80</td>
        <td>80</td>
        <td>80</td>
        <td>80</td>
    </tr>
</table>
<table>
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
        <th>Age</th>
        <th>Age</th>
        <th>Age</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
        <td>50</td>
        <td>50</td>
        <td>50</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
        <td>94</td>
        <td>94</td>
        <td>94</td>
        <td>94</td>
    </tr>
    <tr>
        <td>John</td>
        <td>Doe</td>
        <td>80</td>
        <td>80</td>
        <td>80</td>
        <td>80</td>
        <td>80</td>
    </tr>
</table>
<table>
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
        <th>Age</th>
        <th>Age</th>
        <th>Age</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
        <td>50</td>
        <td>50</td>
        <td>50</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
        <td>94</td>
        <td>94</td>
        <td>94</td>
        <td>94</td>
    </tr>
    <tr>
        <td>John</td>
        <td>Doe</td>
        <td>80</td>
        <td>80</td>
        <td>80</td>
        <td>80</td>
        <td>80</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

Get names with specific characteristics by using a Javascript object that acts as an associative array

Can someone help me with my code? I'm trying to create an input box that, when I type in "A", will display the names of students who have earned "A" grades. I feel like I'm close to getting it right, but there's something missing. Any assist ...

javascripthtmlarraysassociative

Dynamically shift the table footer to the bottom of a scrolling div by utilizing jQuery

I'm facing a challenge where I need to relocate each th tag from the footer row of a table to the bottom of a scrolling div. You can check out the scenario on this link. Currently, I am able to achieve this by hardcoding it like so: $('.sticky- ...

javascriptjqueryhtmlscrollhtml-table

HTML5 audio recording

I have been exploring different methods to record audio using HTML5, but so far I have not found a solution. I attempted to utilize this particular example without success. It seems that the statement about lack of support from any browser may be true. ...

htmlaudio-recording

Utilizing CSS to Rearrange Columns Depending on Screen Size

Check out the progress on this page: If you scroll to the bottom, you'll find a list of links - displayed in 4 columns in the regular view. When you resize the screen, they shift into a single column. I want them to show as a single column on an iPh ...

htmlcss

When a label is clicked, the ng-change event is not triggered on the corresponding radio button

I developed a custom directive that allows you to select a radio button by focusing on its label and pressing the spacebar. However, although the radio button is checked, the ng-change function action() does not get triggered. Below is the HTML code snipp ...

javascripthtmlangularjs

rectangle/positionOffset/position().top/any type of element returning a position value of 0 within the container

While the height/position of the container is accurately displayed, attempting to retrieve the top position (or any position) of containing elements yields a return value of 0. Additionally, using .getBoundingClientRect() results in all values (top, left, ...

javascripthtmlcssuser-interface

unable to display loading image prior to upload

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html lang="en"> <head> <title>Unique Prints</title> <meta charset="utf-8"> <meta name="viewport" conte ...

javascriptjqueryhtmlajaxtwitter-bootstrap

"Clicking on the dropdown menu will consistently result in it collapsing

When it comes to a DropDown menu, the typical expectation is that when an option is selected, the menu will collapse. However, in my situation, I do not want the dropdown menu to collapse if the user is attempting to log in and clicks on the Username and P ...

javascripthtmlcss

Initially, the OWL Carousel image is not displaying correctly due to incorrect sizing

I am currently working with OWL Carousel and have implemented a code that displays one image at a time, with the next image sliding in every 15 seconds. The width is set to occupy 100% of the screen and I have configured the JavaScript accordingly so that ...

javascriptjquerycsscarouselowl-carousel

Using jQuery to append content with a variable as the source

Recently delving into jQuery and encountering an issue with getting my variable inside src when using append. Either it's not functional at all, or just displaying the variable name in string form in the console. Here is the code causing trouble: va ...

javascriptjqueryhtml

Utilize CSS to style Hover effects

Can someone please assist me with this issue? I am having trouble getting the CSS to work for my hover effect. I suspect that there might be a problem with my syntax. Here is the HTML code: <div id="horizontalmenu"> <ul> <li><a h ...

htmlcss

I am experiencing issues with the interpolation of my SASS variables when they are placed into

I am relatively new to the Nuxt ecosystem and I must say it's an awesome package that really simplifies our lives. Currently, I am attempting to incorporate sass into my project. Despite following the steps outlined in the documentation, my build is ...

cssvue.jssassnuxt.js

Issue with sticky navigation bar causing page content to shift

Any ideas on how to solve my issue with a sticky nav bar in Twitter Bootstrap? Whenever I scroll past a certain point, the navbar sticks but causes my content to jump. I want the content to stay in place without jumping. Here is my HTML code: <body> ...

jquerycsstwitter-bootstrap

Give a radio button some class

<input id="radio1" type="radio" name="rgroup" value="1" > <label for="radio1"><span><span></span></span>1</label> <input id="radio2" type="radio" name="rgroup" value="2" > <label for="radio2"><span ...

javascripthtmlcssradio-button

A slender gap of white space delicately separates the transformed parent from its offspring

When trying to align a parent div with a child div that has the same background-color as the parent's border-color, I am encountering an issue. Despite my efforts, there seems to be a thin line of whitespace separating the two divs. It is worth notin ...

css

Struggling with creating an html file that is responsive on mobile devices

I am currently utilizing bootstrap 4 for the construction of a website. I have encountered an issue where my homepage does not display properly on handheld devices when using Google Chrome's device toggle toolbar. The homepage requires scrolling to vi ...

htmlcssbootstrap-4

Is it possible to incorporate a label within a dropdown menu (<select>)?

How can I add a label inside a select box using Bootstrap? Here is an example: Before selecting an option After selecting an option, the label should appear in a small size like this: After selecting an option : <div class="form-group"> & ...

javascripthtmlcssbootstrap-4

Optimizing image centering in Next JS as screen size expands

I've been struggling to work with NextJS's Image component. My goal is to set up a banner image that only covers a specific amount of space on the screen, regardless of screen size. I have managed to achieve this by using max-height: 30vh and ov ...

javascripthtmlcssnext.jsnextjs-image

Error occurs when resizing SVG icon

Having some environmental constraints, I have resized this 16x16 icon to 13.4x16, but it appears blurry. Despite my understanding of SVG and setting the preserveAspectRatio attribute, the resizing does not work as expected. Can anyone point out what I migh ...

htmlcsssvg

When viewing a webpage on a small browser, the content will automatically expand to fill the

Attempting to utilize responsive CSS media queries to hide the sidebar unless the screen is large or a tablet big enough in landscape mode. It appears to be functioning properly while resizing the browser, but at a certain size, it occupies the entire scre ...

cssresponsive-design