Creating consistent vertical lines in HTML tables by aligning them equally on both sides

Hello, I currently have two tables with different content and I am looking to align the vertical lines between them. You can view my code here.

I want to ensure that the vertical line alignment between the two tables looks consistent. Here is my current CSS:

table,
th,
td {
  border: 1px solid black;
}

However, when I add text to the tables, the alignment of the vertical lines gets disrupted. Can you please advise me on how I can improve this?

Month Savings
January $100
February $80
Monthasnsandf Savings
Januarydfsadfas $100
Februarydfsadfsafa $80

csshtml

Answer №1

You have the option to set a specific width for both the th and td elements, such as 50%.

table, th, td {
    border: 1px solid black;
}
table th, table td {
  width: 50%;
}
table th {
  text-align: left;
}
<table style="width:100%" cellpadding="10px" cellspacing="1px" padding="20px">
  <tr>
    <th>Month</th>
    <td>Savings</td>
  </tr>
  <tr>
    <th>January</th>
    <td >$100</td>
  </tr>
  <tr>
    <th>February</th>
    <td >$80</td>
  </tr>
</table>
<table style="width:100%" cellpadding="10px" cellspacing="1px" padding="20px">
  <tr>
    <th>Monthasnsandf</th>
    <td>Savings</td>
  </tr>
  <tr>
    <th>Januarydfsadfas</th>
    <td >$100</td>
  </tr>
  <tr>
    <th>Februarydfsadfsafa</th>
    <td >$80</td>
  </tr>
</table>

Answer №2

To achieve perfect vertical alignment, I nested the two tables within another table that has 2 rows. 

table, th, td {
        border: 1px solid black;
    }
  table th, table td {
      width: 50%;
    }
<table>
  <tr>
    <td>

        <table style="width:100%">
          <tr>
            <th>Month</th>
            <td>Savings</td>
          </tr>
          <tr>
            <th>January</th>
            <td >$100</td>
          </tr>
          <tr>
            <th>February</th>
            <td >$80</td>
          </tr>
        </table>
      </td>
    </tr>
  <tr>
    <td>
        <table  style="width:100%">
          <tr>
            <th>Monthasnsandf</th>
            <td>Savings</td>
          </tr>
          <tr>
            <th>Januarydfsadfas</th>
            <td >$100</td>
          </tr>
          <tr>
            <th>Februarydfsadfsafa</th>
            <td >$80</td>
          </tr>
        </table>
      </td>
    </tr>
  </table>

I believe this setup meets your expectations successfully!

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

Adjust the opacity of certain elements to be semi-transparent, with the exception of the one currently

I'm attempting to implement the :not selector in conjunction with :hover to create a visual effect where elements that are not being hovered over become semitransparent. My goal is as follows: 1) All elements start at 100% opacity 2) When an elemen ...

csshover

Is there a way to access the value of a variable within a loop inside a function and store it in a global variable?

I am struggling to retrieve the value of a variable after it has passed through a loop. I attempted to make it a global variable, but its value remains unchanged. Is there any way to achieve this? Below is my code snippet where I am attempting to access t ...

htmlfunctionvariablesjavascript

Enhancing game menus for various mobile screen sizes

I've noticed a consistent pattern in the games I download from the Google Play Store - they all have a background image at the menu with clickable buttons. When testing these games on different devices, I found that the backgrounds didn't stretch ...

javascriptcsshtmlmobile

Angular - custom font styles for ui grid

I recently added "angular" and "angular-ui-grid" to my app and made sure to include the necessary files: angular.min.js ui-grid.min.js ui-grid.min.css Although the table is displaying properly, the arrows in the row header show up as "Korean symbols." D ...

cssangularjsfontsgruntjsangular-ui-grid

What is preventing the assignment of a class attribute inline using JavaScript?

<html> <head> <style> .tagging { border: 1px solid black; width: 20px; height: 30px; } </style> <script> window.onload = function() { var div = document.getE ...

javascriptcss

The content within the div appears to be in a perpetual state

I'm working on creating a chat application with a single interface. I've encountered an issue where the content in the middle div "messages" keeps bouncing, including the scroll bar. How can I resolve this problem? Additionally, I'm unable ...

javascripthtmlcss

Animating content to slide into view in the same direction using CSS transitions

My goal is to smoothly slide one of two 'pages', represented as <divs>, into view with a gentle transition that allows the user to see one page sliding out while the other slides in. Eventually, this transition will be triggered from the ba ...

javascriptjquerycsscss-transitionscss-animations

Show the user's input on the canvas

Currently, my setup consists of 3 elements - a text field and a submit button at the top, with a canvas below them. I am looking for a way to showcase user input on the canvas after they click the submit button. If you have any JavaScript suggestions, I w ...

javascripthtmltextcanvas

Designing versatile buttons with HTML

When accessing the website on a phone, I have trouble seeing and tapping on these two buttons because they are too far apart. I would like to change it so that once a file is selected, the 'choose file' button will be replaced by the upload butto ...

javascripthtmlcssbutton

What is the best way to ensure a textarea element fills the entire height using Bootstrap 4?

Is there a way to ensure the textarea element dynamically adjusts its height to fill the space between the header and footer without causing a scroll bar when using bootstrap 4? Here is the HTML code snippet I've been working with: #container { ...

htmlcssbootstrap-4

Employing jQuery's offset() method for scripting

Issue: The problem I'm facing is that after clicking on the label where the date should be entered, the calendar is not appearing as expected. I tried using a jQuery script to darken the background, but then the calendar is not displaying in the corre ...

javascriptjquerycss

How do I directly display a variable in index.html using node.js?

Is there a way to retrieve user inputs from the index.html file, process them in Node.js, and then display the result back on the index.html page instead of redirecting to a new page? Form Handling with Express var express = require('express'); ...

javascripthtmlnode.jsexpress

How to use JavaScript to hide an element (field) in XPages

In XPages, I understand that only editable fields are able to retrieve values from context. My question is: how can I hide a field using CSS or JavaScript in XPages while still being able to get its value from the context? Many thanks ...

javascriptcssfieldhidexpages

Tips for preventing the sidebar from extending beyond the footer

I am facing an issue with my sidebar that follows as I scroll. How can I make it stop following when it reaches the footer? Here's what I have attempted so far: $(function() { var floatPosition = parseInt($("#left_menu").css('top')); ...

javascriptjqueryhtmlonscroll

Attempting to show information upon hovering using CSS and keyframes

After creating a display that matched my boss's request for a "flat tile" look using only CSS, he suddenly changed his mind and now wants the text to slide out while keeping the image in place. You can see my progress here. I initially tried floating ...

htmlcsscss-animationsz-index

Stylesheet for Foundation Buttons in CSS/SASS

I am currently working on customizing the appearance of Zurb Foundation using SASS/CSS. However, I am facing an issue with the buttons. There seems to be a highlight at the top of the buttons that gives them a traditional button look, which I want to remov ...

csssasszurb-foundation

Utilizing jQuery's slideToggle feature to toggle between generated arrays

My goal is to use forms to create events, including a title, date, time, location, and description. When the button is clicked, it generates a list of events in an array. However, I am aware that the validEvent() code is no longer functional and I am loo ...

javascriptjqueryhtmlarrays

The functionality of Flatbutton(Input handler) appears to be malfunctioning

I am having trouble with the file uploader from Material-UI. It doesn't seem to be working properly when I try to select a file. Does anyone have any suggestions on how to handle the input from the file selector? <FlatButton icon={< ...

javascripthtmlreactjsmaterial-designmaterial-ui

Instructions on passing a PHP variable as a parameter to a JavaScript function when a button is clicked

In my implementation of codeigniter 3, I have a view page where the data from $row->poll_question is fetched from the database. The different values within this variable are displayed on the voting.php page. Next to this display, there is a button label ...

javascriptphpjqueryhtmlcodeigniter

Creating a flexible Tic Tac Toe board using only HTML and CSS without any JavaScript

I'm currently tackling an HTML layout challenge that involves creating a responsive Tic Tac Toe board using only HTML and CSS, without any JavaScript. This is how I have structured the layout of the board: <div class="board"> <div class= ...

htmlcss