Is it possible to align table columns vertically using liquid?

After spending a decade browsing this site, I finally decided to create an account and ask my own question. So here it is:

This is the liquid code snippet I am working with:

<table data-mce-fragment="1" width="100%">
<td data-mce-fragment="1" style="width: 50%;">{{ 'https://cdn.shopify.com/s/files/1/0556/5258/1539/files/windows-logo.png'| img_tag: 'Windows Compatible Operating Systems' }} Windows Compatible Operating Systems<br><br>
{{ product.metafields.custom.windows_compatible_operating_systems_3_0 }}</td>
<td data-mce-fragment="1" style="width: 50%;">{{ 'https://cdn.shopify.com/s/files/1/0556/5258/1539/files/mac-logo.png?v=1707807667'| img_tag: 'Mac Compatible Operating Systems' }} Mac Compatible Operating Systems<br><br>
{{ product.metafields.custom.mac_compatible_operating_systems_3_0 }}</td>
</tr>
</tbody>
</table>

The output looks like the image I have attached.

However, there seems to be a vertical misalignment.

My question is, how can I align the windows column to the top with the mac column?

I suspect the discrepancy is due to the longer text in the Mac column.

Check out the image here

htmlcssliquid

Answer №1

When it comes to dealing with a web application that only functions on a web browser, there is a solution you can implement without needing to know Liquid Library.

You can utilize the vertical-align attribute for each td element. This attribute should be effective as long as the display property of the td tags remains unchanged.

(For more information on the vertical-align attribute, visit: https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align)

<body>
  <table data-mce-fragment="1" width="100%" height="100%">
    <tbody>
      <tr>
        <td
          data-mce-fragment="1"
          style="width: 50%; vertical-align: top"
        >{{ 'https://cdn.shopify.com/s/files/1/0556/5258/1539/files/windows-logo.png'| img_tag: 'Windows Compatible Operating Systems' }} Windows Compatible Operating Systems<br><br>
        {{ product.metafields.custom.windows_compatible_operating_systems_3_0 }}
        </td>
        
        <td
          data-mce-fragment="1"
          style="width: 50%; vertical-align: top"
        >{{ 'https://cdn.shopify.com/s/files/1/0556/5258/1539/files/mac-logo.png?v=1707807667'| img_tag: 'Mac Compatible Operating Systems' }} Mac Compatible Operating Systems<br><br>
        {{ product.metafields.custom.mac_compatible_operating_systems_3_0 }}
        </td>
      </tr>
    </tbody>
  </table>
</body>

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

Having Trouble Aligning Contents in a Row Horizontally using Bootstrap 5

My Images are refusing to align in a horizontal row no matter what I try. Output: https://i.sstatic.net/echGV.png .img-size-square { width: 100%; height: auto; max-width: 400px !important; max-height: 400px !important; } .container-f ...

htmlcssbootstrap-5

MaxwidthLG in Material UI design

Hi there, I've encountered an issue with Material UI CSS. Even after attempting to override it, the desired effect is still not achieved. My goal is for the entire div to occupy the full page but this is the current result: https://i.stack.imgur.com/b ...

cssmaterial-uimaterial-design

Syncing up text and icon in a single row using Angular CSS

I am working on a section with a grey row that will have both text and icons. Currently, my code looks like this: {{ trans.dashboard.settings.car.Name| translate }} <i class="fas fa-caret-up"></i> While this works, I want the text to ...

htmlcssangular

Identifying the Position of the Scroll Bar with Selenium IDE

I have been using Selenium IDE to perform certain tasks, but I encountered a limitation in its functionality. To overcome this, I utilized the user-extension.js file. Below is an example of my javascript code. Selenium.prototype.getToppos = function () { ...

javascripthtmlseleniumidescroll

WordPress WooCommerce causing the right bar to be pushed below

I'm currently facing an issue on my WordPress site with a purchased template and Woocommerce integration. The problem lies in the fact that the right sidebar gets pushed down on the shop page. When I reached out to the template developers, they sugges ...

phpcsswordpresspluginswidget

The webpage at 'https://abcd.ac.in/' has been declined to be displayed in a frame due to the 'X-Frame-Options' being set to 'sameorigin'

When attempting to load a website within an iframe, I encountered an error in the console stating "Refused to display 'https://abcd.ac.in/' in a frame because it set 'X-Frame-Options' to 'sameorigin'. Despite trying other alte ...

htmlangulariframeangular8

Issues with styling SVG when using the `<use>` element

I am currently faced with a challenge involving CSS, where I need to modify the size and color of an SVG element that is being displayed using <use>. The specific SVG in question is as follows: <svg xmlns="http://www.w3.org/2000/svg" width="24" h ...

csssvg

HTML row with interactive functionality that sends data via POST method to another PHP file

I am currently working on an HTML table where I am displaying data from a database. My goal is to make the entire row clickable so that I can trigger a PHP script using the data from that specific row as variables. However, I am facing a challenge in figur ...

phphtmlmysql

Combining CSS with PHP includes for dynamic navigation menus

I am currently designing a CSS navigation bar located within the 'includes' folder. My goal is to make each link in the navigation bar active when clicked. I have linked to this folder using "include('includes/header.php');" Here is my ...

phpcss

What is the best way to enclose a parent div around a child div that has been

I'm struggling to figure out how to make the headerLinks div encompass both headerLink divs so that I can adjust the links' positions and margins as a group. Is there a better approach I should be taking? If so, could you provide guidance on how ...

htmlcss

Issues with the jQuery slideToggle Method

Can someone assist me in identifying the issue with this code? I am attempting to implement a basic slideToggle functionality! Here is my initial attempt: $("..").slideToggle(..,..,..) This is what my current code looks like: My code: $(document).rea ...

javascriptjqueryhtmlcssslidetoggle

CSS code that is displaying as plain text on some computers, however it is functioning correctly on my own

I've been working on my home page, and everything was going smoothly. However, whenever I share it with someone else, the CSS doesn't seem to work properly. When I check the code on their laptop, it seems like it's being read as plain text r ...

htmlcss

Animate your images with a captivating wave effect using SVG animation

I've been working on animations and I have an SVG image that I want to move like a wave continuously. I've tried using GSAP and CSS but still haven't been successful. Can anyone offer any suggestions or help? It would be greatly appreciated. ...

htmlcssgsap

Choosing the Right Project for Developing HTML/Javascript Applications in Eclipse

Whenever I attempt to build a webpage using eclipse, I am presented with two choices: -- A Javascript project -- A Static web project If I opt for the former, setting up run to open a web browser can be quite challenging. If I decide on the latter ...

javascripthtmleclipseproject

Some divs are not inheriting class properties as expected

I am currently working on a footer section that consists of 4 div elements, each with a shared class. Oddly enough, the first div is extending its width more than expected. The other 3 div elements are adjusting their width based on the content within them ...

htmlcssflexbox

Problem with automatic saving of workspaces in DBeaver

Currently using DBeaver with Oracle server and encountering a recurring error related to workspace save. I have searched online for a solution, but all results seem to focus on meta data explanations. As someone new to DBeaver, I would greatly appreciate ...

javahtmldbeaver

The width of the <ul> element does not properly accommodate the width of the <li> elements during the animation that updates the width of the <li>

I am currently working on implementing a typing animation in React. The li element has an animation that recursively changes its width from 0px to 100%. However, I have noticed that when the width of the li changes, the parent ul does not adjust its width ...

javascripthtmlcssreactjs

Images within inline blocks appear to be extending beyond their containing div as though they are

When I check my website in various browsers such as Firefox, IE, Edge, and Safari, I noticed that the images in the "My Specialties" section of the left column are extending outside of the div instead of fitting within it. This problem also occurs in Chrom ...

javascriptjqueryhtmlcss

How to display a list of buttons with unique names using ng-repeat in Ionic 3

Just starting out with Ionic 3 and attempting to create a list of buttons using ng-repeat. Each button differs only in name. Here's my HTML code: <ion-content padding> <div ng-repeat="tip in healthTipsButtonList"> <button i ...

htmlangularbuttonangularjs-ng-repeationic3

'Modify' feature for forum threads and other similar posts

While searching online for a script that would allow users on my site to edit fields and other information, I couldn't find anything specific. Can someone please explain or demonstrate how this process works with a script? Essentially, I want users to ...

phpmysqlhtml