Why are tables and their contents mysteriously moving apart?

My tables look perfect in JSFiddle, but when viewed on another website in the same browser, everything shifts to the right. How can I adjust it to display correctly like in the JSFiddle example? All elements should be aligned back to the left as indicated by the arrows in the screenshot.

Original code snippet:

<table style="height: 28px; width: 99.0328%; border-collapse: collapse; border-style: hidden;" border="0">
  <tbody>
    <tr style="height: 18px;">
      <td style="width: 13.0819%; height: 18px;"><span style="font-family: Tahoma, Geneva, sans-serif; font-size: 14.0px; font-style: normal; line-height: 16px; font-weight: 400; display: inline;">Some text</span></td>
      <td style="width: 63.7345%; height: 18px;">&nbsp;</td>
    </tr>
    <tr>
      <td style="width: 13.0819%;"><span style="font-family: Tahoma, Geneva, sans-serif; font-size: 14.0px; font-style: normal; line-height: 16px; font-weight: 400; display: inline;">&nbsp;</span></td>
      <td style="width: 63.7345%;">&nbsp;</td>
    </tr>
    <tr style="height: 18px;">
      <td style="width: 13.0819%; height: 10px;"><img style="display: block; margin: 0px auto 30px auto;" src="https://content.linkedin.com/content/dam/me/business/en-us/amp/brand-site/v2/bg/LI-Bug.svg.original.svg" alt="" width="120" height="120" /></td>
      <td style="width: 63.7345%; height: 10px;">
        <table style="height: 46px; width: 32.4247%; border-collapse: collapse; border-style: hidden;" border="0">
          <tbody>
            <tr style="height: 18px;">
              <td style="width: 100%; height: 10px;"><span style="font-family: Tahoma, Geneva, sans-serif; font-size: 18.0px; font-style: normal; line-height: 24px; font-weight: bold; color: #454545; display: inline;">TITLE</span></td>
            </tr>
            <tr style="height: 18px;">
              <td style="width: 100%; height: 18px;"><span style="font-family: Tahoma, Geneva, sans-serif; font-size: 13.0px; font-style: normal; line-height: 17px; font-weight: 600; color: #f25e30; display: inline;">Description</span></td>
            </tr>
          </tbody>
        </table>
        <table style="height: 74px; width: 38.1632%; border-collapse: collapse; border-style: hidden;" border="0">
          <tbody>
            <tr style="height: 18px;">
              <td style="width: 10.1%; height: 18px;"><img src="https://y5t6h9a6.stackpathcdn.com/39f70a22-cae2-45dd-b2a1-ae008217d0c3/img.png" alt="" width="16" height="16" /></td>
              <td style="width: 690.907%; height: 18px;"><span style="font-family: Tahoma, Geneva, sans-serif; font-size: 14.0px; font-style: normal; line-height: 16px; font-weight: 400; color: #454545; display: inline;">phone number</span></td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

htmlcsshtml-table

Answer №1

If my understanding of the issue is correct, you are looking to shift the contents to the left in all scenarios. It's important to first understand the reason behind this behavior, which lies in the usage of CSS relative units. In CSS, you have the option to specify the unit of your width, height, or any property in two ways:

  1. Using relative units like %, vw, and more.
  2. Using absolute units such as px.

The latter is preferable when you require an element (in this case, the table tag) to maintain a fixed value, irrespective of browser dimensions. When viewing your code on tools like jsfiddle, the display area may be limited, resulting in compact elements with minimal spacing between them due to the relative sizing (width: 99.0328%) based on the parent element's width (the body tag). Viewing the same code on a PC browser with greater width will yield a distinct outcome (similar to the image you shared). One viable solution is to encapsulate the entire table within a <section> tag and assign an absolute width to that <section> element, as shown below:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <:title>Document</title>
</head>
<body>

<section style="width: 606px">
<table style="height: 28px; width: 99.0328%; border-collapse: collapse; border-style: hidden;" border="0">
    <tbody>
    <tr style="height: 18px;">
        <td style="width: 13.0819%; height: 18px;"><span style="font-family: Tahoma, Geneva, sans-serif; font-size: 14.0px; font-style: normal; line-height: 16px; font-weight: 400; display: inline;">Some text</span></td>
        <td style="width: 63.7345%; height: 18px;">&nbsp;</td>
    </tr>
    <tr>
        <td style="width: 13.0819%;"><span style="font-family: Tahoma, Geneva, sans-serif; font-size: 14.0px; font-style: normal; line-height: 16px; font-weight: 400; display: inline;">&nbsp;</span></td>
        <td style="width: 63.7345%;">&nbsp;</td>
    </tr>
    <tr style="height: 18px;">
        <td style="width: 13.0819%; height: 10px;"><img style="display: block; margin: 0px auto 30px auto;" src="https://content.linkedin.com/content/dam/me/business/en-us/amp/brand-site/v2/bg/LI-Bug.svg.original.svg" alt="" width="120" height="120" /></td>
        <td style="width: 63.7345%; height: 10px;">
            <table style="height: 46px; width: 32.4247%; border-collapse: collapse; border-style: hidden;" border="0">
                <tbody>
                <tr style="height: 18px;">
                    <td style="width: 100%; height: 10px;"><span style="font-family: Tahoma, Geneva, sans-serif; font-size: 18.0px; font-style: normal; line-height: 24px; font-weight: bold; color: #454545; display: inline;">TITLE</span></td>
                </tr>
                <tr style="height: 18px;">
                    <td style="width: 100%; height: 18px;"><span style="font-family: Tahoma, Geneva, sans-serif; font-size: 13.0px; font-style: normal; line-height: 17px; font-weight: 600; color: #f25e30; display: inline;">Description</span></td>
                </tr>
                </tbody>
            </table>
            <table style="height: 74px; width: 38.1632%; border-collapse: collapse; border-style: hidden;" border="0">
                <tbody>
                <tr style="height: 18px;">
                    <td style="width: 10.1%; height: 18px;"><img src="https://y5t6h9a6.stackpathcdn.com/39f70a22-cae2-45dd-b2a1-ae008217d0c3/img.png" alt="" width="16" height="16" /></td>
                    <td style="width: 690.907%; height: 18px;"><span style="font-family: Tahoma, Geneva, sans-serif; font-size: 14.0px; font-style: normal; line-height: 16px; font-weight: 400; color: #454545; display: inline;">phone number</span></td>
                </tr>
                </tbody>
            </table>
        </td>
    </tr>
    </tbody>
</table>
</section>

</body>
</html>

To delve deeper into various CSS units, I recommend exploring additional tutorials like this one.

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

overflowing bootstrap cards are causing disruptions in row layouts and impacting the margins of surrounding elements

As a beginner in the world of programming, I'm reaching out for help with my first post. Please bear with any errors in my code or confusion in my terminology. Experimenting with bootstrap cards on a blog template, I am facing an issue where the heig ...

htmlcsstwitter-bootstrapbootstrap-4responsive

Submitting a form with multiple actions using Ajax

Is it possible to submit data from multiple forms on the same page to different API tables using AJAX for each form? I have one form that needs to write to one table and another form that needs to write to a different table. How can I achieve this with o ...

jqueryhtmlajaxformsform-submit

CSS Hover Effects on Navigation Bar Not Displaying as Expected

I was aiming to make one of my Navbar tabs stand out by having a different appearance compared to the others. However, there seems to be an issue with the text color for this particular tab in the hover state - it works inconsistently across different brow ...

htmlcsstwitter-bootstrap

Unexpected Mouseover/Mouseenter event triggered beyond the boundaries of the target element

Is there a simple way in jQuery to activate a mouseover/mouseleave event on an element with an additional 20px border on both sides? For example, I have some next/previous buttons that are displayed outside of the website container using #slider .prev{po ...

javascriptjqueryhtmlcss

Why does the jQuery hide function fail to work on a div with the same class after an ajax

1. I'm encountering an issue with my code. I have a div class "inner" which is being dynamically loaded via an ajax call. However, after the ajax call, if I click the hide button, it doesn't work. Strangely, it was working perfectly fine before ...

javascriptjqueryhtmlajax

Display numerous divisions depending on the choices made in several Select2 fields

I need assistance in creating a website without using check-boxes, and I believe jQuery Select2 is the solution. However, I am facing an issue where I cannot display multiple divs based on multiple Select2 selections. For instance, if "OnBase" is selected ...

javascriptjqueryhtmljquery-select2jquery-select2-4

The navbar expands in height when resized

I've been working on creating a responsive navbar, but I'm facing an issue where the height of the bar doubles between phone screen size and full window size. Despite trying various Bootstrap classes, I haven't had any success in fixing this ...

htmlcsstwitter-bootstrapbootstrap-4

Reorganize column layout with Bootstrap grid and modify sequence

Below is an image showcasing the desired change: https://i.sstatic.net/mnUUq.png Currently, the page layout consists of two main columns: a sidebar on the left with rows, and the main body on the right, formatted in a 3x9 grid. My goal is to have the firs ...

htmlcssbootstrap-4

Accordion featuring content that is partially collapsed

<div class="accordion" id="uniqueAccordionExample"> <div class="card"> <div class="card-header" id="headingUniqueOne"> <h5 class="mb-0"> <button class="btn btn-link" type="button" data-toggle="collapse" data-t ...

javascripthtmlcssbootstrap-4accordion

Positioning the box at the exact middle of the screen

I'm trying to center an item on the screen using material ui, but it's appearing at the top instead of the middle. How can I fix this? import * as React from 'react'; import Box, { BoxProps } from '@mui/material/Box'; functio ...

cssreactjstypescriptmaterial-ui

Steps for connecting a PHP file to an HTML button

Currently, I am trying to implement a functionality where clicking on a button will load a php file. However, despite my efforts, the php file is not loading as intended. Is there a way to associate the php file with the button using an anchor tag? <a ...

phphtmlsqlanchor

PHP combined with Mysql in UTF8 format

My SQL database is using utf8_unicode_ci collation, while the HTML is set to utf8 (meta charset="utf-8"). When I write the following PHP code: $query = "SELECT * FROM `subjects` WHERE `year` = '$year'"; $result = $mysqli->query($query); w ...

phphtmlmysqlutf-8

When you choose an option from a dropdown menu filled with data from PHP, utilize that selected data to dynamically populate an HTML table with additional PHP logic based on the

Greetings and thank you for joining us. Currently, I have a Category table with "n" values, and a Price table with "n" duplicated idCategories (foreign key). My goal is to populate an HTML table with all the prices associated with a selected Category fro ...

phphtmlmysql

What's the best way to ensure these have equal heights?

There seems to be a difference in height between the verses at the bottom, and I want each verse next to each other to have equal heights. Here is my current code setup: .verse img { height: 1em; } <h1>PSALM 1</h1> <p> <div> ...

csstextvertical-alignment

What is the best way to align an extensive text and an image side by side within a table cell?

I am facing an issue with my code. In one of the td elements, I have the user's name image on the left and their first name on the right. The problem arises when the first name is too long, causing the image to disappear. Everything works fine if the ...

cssangularsass

Is it possible to showcase CSS and JavaScript code exactly as it appears when the files are saved in their respective formats, but embedded within an HTML

Recently, I've been working with notepad++ and have come across an interesting challenge. In my index.html file, I have embedded css and javascript code. Is there a way to display this code as it appears when saved in their respective files, but maint ...

javascripthtmlcss

Flexbox failing to showcase elements

My goal is to design a 2 column layout where the left column has a fixed width and the right column adjusts its size to fill the remaining space on the screen. However, I am facing difficulties with displaying the columns properly. .container { display: ...

cssflexbox

Using PHP with Slim PHP Framework to dynamically include CSS files in the header of a document

I have developed a sleek application featuring a login form, dashboard, registration page, and account page. Each of these pages has its own unique route. To maintain consistency across all pages, I have included a shared header and footer by inserting < ...

phphtmlcssdynamicslim

"Issue with scaling on Responsive Canvas leading to blurriness

I am working on a Canvas project and I want to make sure it is easily navigated on any device, whether it's a desktop or mobile. To achieve this, I decided to make the canvas responsive. Originally, the canvas was set at 800x800 which looked fine but ...

javascripthtmlcsshtml5-canvas

What is the best way to add the current date to a database?

code: <?php session_start(); if(isset($_POST['enq'])) { extract($_POST); $query = mysqli_query($link, "SELECT * FROM enquires2 WHERE email = '".$email. "'"); if(mysqli_num_rows($query) > 0) { echo '<script&g ...

javascriptphpjqueryhtmlcss