Instructions for applying a CSS width to a specific column in an HTML table within an email template for Outlook

When trying to develop an email template for Outlook, I encountered an issue with adding width to the column in an HTML table. Despite setting the property, it did not reflect correctly in the email. Various attempts were made to address this problem.

<table
  cellspacing="0"
  cellpadding="0"
  style="table-layout: fixed; border-collapse: collapse; width: 100%"
>
  <tbody>
    <tr style="background-color: #1890ff">
      {% for item in first_table_column_names %}
      <td
        width="30%"
        style="border: 1px solid #000000; color: #ffffff; padding: 5px"
      >
        {{item.name}}
      </td>
      {% endfor %}
    </tr>
  </tbody>
</table>

In addition, another approach was taken:

<table border="0" cellpadding="0" cellspacing="0" width="580" style="background-color: #0290ba;">

Unfortunately, these methods did not work as desired in the Outlook application on PC, causing the table layout to appear distorted. Any assistance or guidance on resolving this issue would be greatly appreciated.

Answer №1

Please consider using nested tables for the HTML mailer.

Below is a sample code that may be helpful:

<table cellspacing="0" cellpadding="0" style="table-layout: fixed; border-collapse: collapse; width: 100%">
  <tbody>
    <tr style="background-color: #1890ff">
      {% for item in first_table_column_names %}
      <td width="100%" style="border: 1px solid #000000; color: #ffffff; padding: 5px">
        <table cellspacing="0"cellpadding="0">
          <tr>
            <td style="width:30%;background-color:red;">
              {{item.name}}
            </td>
          </tr>
          
        </table>
      </td>
      {% endfor %}
    </tr>
  </tbody>
</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

Guide to designing a CSS gradient with a downward arrow linked to a specific container

I'm attempting to add a triangular arrow beneath the v-container, complete with a gradient color scheme. However, I'm struggling to integrate the gradient seamlessly. If I use CSS to create the arrow, the gradient doesn't align correctly. ...

How can you delete using JavaScript by pressing the "Delete" key?

Is it possible to programmatically trigger the deletion of text on an HTML web page using JavaScript or jQuery? I am looking for a way to replicate the functionality of clicking the "Delete" button without requiring users to physically click on it. Inste ...

Preventing the sidebar from overlapping with the main content in Bootstrap layout

My layout is set up as follows: Example I am encountering an issue when resizing the window, as there is overlap with the main content. Here is an example of the issue How can I prevent this overlap while still maintaining padding? Below is my HTML an ...

Phonegap enables iOS keyboard to dynamically adjust screen size during use

Currently, I am developing an iOS app using phonegap 3.0 and have encountered a particular issue. In my app, there is a window where users are required to enter a promo code. The problem arises when I click on the input area (see this example) and then pr ...

Switch the color (make it gray) of the selected tab in the navigation bar

<!-- Customizing the Navbar --> <nav class="navbar navbar-expand-sm bg-primary navbar-dark"> <a class="navbar-brand" href="<?php echo base_url('Controller_dashboard'); ?>"><strong>StuFAP MS</strong></a> ...

Automatic scrolling feature in JavaFX

I am currently working on developing a chat box using JavaFX. My goal is to implement an auto-scroll feature that will scroll down the page when it gets filled up. However, I am facing some issues with this functionality. import javafx.application.Applica ...

Replacing scrollbars of a div using overflow:auto with arrow indicators: A step-by-step guide

Currently, I am in the process of creating a small div element that will enable users to scroll between images within a jquery image zoom plugin designed for an eCommerce website. Below is the code snippet that I have developed thus far: <div style="w ...

angularjs: implementing if-else conditions in directives

When a user enters a username in the textbox, a directive will check if it already exists in the database. If the username is found, a warning message stating "user already exists" will be displayed next to the textbox. If the username does not exist, a wa ...

What is the reasoning behind having blank space between the buttons?

Can anyone help me understand why there is visible space between the buttons in the code example provided below? Despite removing margins and paddings, the whitespace persists. <body> <div class="button-container"> <button>1& ...

What is the best way to ensure that a React app is always displayed in full screen

I am facing an issue while developing an app with React and Material UI. I am trying to display the app in full-page mode, but unable to achieve it successfully. Currently, it appears like this: https://i.sstatic.net/Hg0CA.png Here is my code snippet from ...

Troubleshooting: Inefficient multiple name selection with Jquery

Hey there, I'm currently testing some code for my website that involves selecting multiple names using jQuery. However, I'm encountering an issue where only one of the checkbox groups is working. The goal is to allow users to select only one opt ...

Modify the Navbar color with a sticky-top effect in Bootstrap 4

For my sticky navbar, I utilized the Bootstrap 4 class sticky-top. My preference is for a CSS-based solution rather than JavaScript due to past errors encountered with JS. I aim to have my navbar change to a transparent color when it becomes sticky upon s ...

We have come across a project on CodePen that utilizes Three.js, and we are looking to customize its color scheme

We stumbled upon a fascinating blob experiment on Codepen (https://codepen.io/vcomics/pen/ZwNgvX) and were eager to incorporate it into our project. However, we encountered an issue with the color changing feature on this perlin object (rcolor, gcolor, bco ...

Error: The property 'classList' of null is unreachable for HTMLImageElement

I'm facing an issue on my website that's causing the following error message to pop up: Uncaught TypeError: Cannot read property 'classList' of null at HTMLImageElement. Here's the code I've been using: https://jsfiddle. ...

Develop a unique card design using HTML and CSS

I am attempting to recreate a card design similar to the one shown in the image, but I am struggling to identify the name on the right side. Even though it is supposed to be clear, I always rely on the image as a reference. https://i.sstatic.net/hDh22.png ...

Passing an array of ID's between two components in Angular: A comprehensive guide

Greetings fellow readers, I have encountered a new challenge in my Angular project. I need to pass an array of IDs from one component to a completely unrelated component. Most solutions suggest using ViewChild, Input, or Output, but since the components ar ...

What is the best way to add hyphens between words in PHP code?

Here is the code snippet and the desired output: ('nice apple'),(' nice yellow banana'),(' good berry ') To achieve the desired output: ('nice-apple'),(' nice-yellow-banana'),(' good-berry ') ...

Strange behavior in Internet Explorer when using jQuery to simulate a click on an input=file element

My customized jQuery and HTML code achieves the following purpose: There is a placeholder image that can be clicked by the user, triggering a file selection dialog to open. Once a file is chosen, the corresponding multipart form is sent to the server. To ...

Using JavaScript to display content on the screen

As a newcomer to Javascript, I'm looking for a way to display my variable on the webpage without utilizing <span> or innerHTML. var pProductCode = $('[name=pProductCode]').val(); $('input[id*="_IP/PA_N_"]').each(function(i){ ...