Arranging Cells in Email Tables

I'm having some trouble adding a left-hand side border to the two right-hand side table cells in an email template I'm creating for a small group of people.

<table class="content" style="table-layout:fixed; background: none repeat scroll 0% 0% #FFFFFF; width: 600px; max-width: 600px; margin: 0px auto;" cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#FFFFFF">
<thead cellspacing="0" cellpadding="0" border="0">
    <tr style="width: 100%; background: red;" bgcolor="red" cellspacing="0" cellpadding="0" border="0">
        <td style="width: 70%;" rowspan="2" align="left" valign="middle" colspan="8" cellspacing="0" cellpadding="0" border="0">
            <h1>
                <a style="text-decoration: none; font-weight: normal; letter-spacing: -1.5px; line-height: 22px; color: #ffffff; font-size: 22px; padding: 20px 20px 20px 20px;" href="#">
                    <img src="http://dummyimage.com/178x32/000000/fff.jpg&text=Image" alt="image" width="178" height="32" />
                </a>
            </h1>
        </td>
        <td style="width: 30%; border-left: 1px solid #FFFFFF;" align="right" colspan="4" cellspacing="0" cellpadding="0" border="0">
            <table cellspacing="0" cellpadding="0" border="0">
                <tbody cellspacing="0" cellpadding="0" border="0">
                    <tr cellspacing="0" cellpadding="0" border="0">
                        <td cellspacing="0" cellpadding="0" border="0" style="color: #ffffff; text-align: center; padding: 20px 20px 20px 20px; border-bottom: 1px solid #FFFFFF; font-family: Helvetica, Arial, Verdana; font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase;">Ipsum Dolor Sit</td>
                    </tr>

                    <tr cellspacing="0" cellpadding="0" border="0">
                        <td cellspacing="0" cellpadding="0" border="0" style="color: #ffffff; text-align: center; padding: 20px 20px 20px 20px;">
                            <a style="text-decoration: none; color: #ffffff; font-family: Helvetica, Arial, Verdana; font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase;" href="#" target="_blank">Cras Odio Ligula</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
</thead>
<tbody>
</tbody>
<tfoot>
</tfoot>

JSFiddle

How can I eliminate the empty space between the vertical and horizontal lines to ensure that the layout of the template is correct?

htmlcssemail

Answer №1

By setting the inner table (within the <td> tag on the right side) to have a width of 100%, I was able to eliminate the empty space. This is because the inner table now extends across the entire available width:

<table cellspacing="0" cellpadding="0" border="0" width="100%">
    <tbody cellspacing="0" cellpadding="0" border="0">
        ...         
    </tbody>
</table>

If you don't specify a width of 100%, the table will only take up as much width as it needs for the content along with padding and margin.

Updated Fiddle

Answer №2

To solve the problem, assign 100% width to the table within a 'td' element that has a width of 30%.

Answer №3

Revise the code below:

<td style="width: 23%; border-left: 1px solid #FFFFFF;" align="center" colspan="4" cellspacing="0" cellpadding="0" border="0">
        <table cellspacing="0" cellpadding="0" border="0">

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

The container that utilizes the grid layout is compact and has a near-invisible height

grid-template: display; font-style: "Josefin Sans", sans-serif; size-of-text: 10px; element-height: 0px; spacing-bottom: 0px; spacing-left: 0px; spacing-right: 0px; spacing-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-up: 0 ...

css

What could be the reason that my Bootstrap dropdown menu is not appearing on my website

I am currently utilizing Angular in my project. I have incorporated bootstrap and jQuery via NPM install, and specified them as dependencies in angular.json. The navbar on my site contains a dropdown menu. When I hover over the dropdown menu, it should di ...

htmlcssangulartwitter-bootstrapbootstrap-5

How does adding padding cause two horizontal divs to become vertical?

I noticed that when I remove the padding from the code below, two vertical divs become horizontal. This is confusing to me because I thought padding only affects internal spacing. I was expecting the two divs to be aligned horizontally. <style> #w ...

htmlcss

How to transform an image into a base64 string using Vue

I am having trouble converting a local image to base64. The function reader.readAsDataURL is not working for me. Instead of the image data, I always get 'undefined' assigned to the rawImg variable. The file variable contains metadata from the upl ...

javascripthtmlimagevue.jsbase64

Is it possible for JavaScript to capture scroll events while allowing clicks to pass through?

Currently, I have a setup where the user needs to interact with the layer behind the transparent scroll capture: http://jsbin.com/huxasup/4/edit?html,css,js,console,output scrollerCapture = document.querySelector('.scroller-capture'); scrollerC ...

javascripthtmlcssscroll

Load image in browser for future display in case of server disconnection

Incorporating AngularJS with HTML5 Server-Side Events (SSE) has allowed me to continuously update the data displayed on a webpage. One challenge I've encountered is managing the icon that represents the connection state to the server. My approach inv ...

javascripthtmlangularjs

Animate all shapes in SVG to rotate around a central pivot point

I am looking for a simple way to make an SVG graphic rotate around its center point. The rotation doesn't need to be smooth, just a 90 degree turn and back every second. https://i.sstatic.net/H6CTF.png Here is the SVG code: <?xml version="1.0" e ...

cssanimationsvgrotation

When HTML/JS code is utilized, the submit button or image should function to open the same page as

In addition to the left and right mouse buttons, you also have a middle mouse button. If you click on an image or hyperlink with this middle mouse button while browsing any website, it will open a new window in the background. Now, I want to achieve a sim ...

javascripthtmlformssubmit

Python script executing on an empty canvas

I have an HTML page passing input values to a python script for processing. I want to display the results of the calculations simply on a plain white page with no formatting, just plain numbers. The issue is that despite successfully passing and processin ...

pythonhtml

Is it possible to utilize jQuery for dynamically generating a file along with its content?

Here is the HTML snippet I am working on: <ul> <li> Download <a href="#">file1</a> </li> <li> Download <a href="#">file2</a> </li> <li> Download <a href="#">file3</a> </li> ...

javascriptjqueryajaxhtml

The Enigma of the Empty Gap When Employing "display:table/table-cell"

Struggling to understand why there is a blank space between the image and the menu. Here is the HTML and CSS related to it: <header class="header_nav"> <img src="img/logo.png" class="logo"/> <nav class="nav_bar"> <u ...

htmlcssweb

Notify when the focus is solely on the text box

How can I display an alert only when the focus is on a text box? Currently, I am getting an alert whenever I skip the text box or click anywhere on the page. The alert even appears when I open a new tab. Is there a way to fix this issue? Thank you for your ...

javascriptjqueryhtmltextboxalert

JavaScript Application - Problem with Universal Windows Script

I recently built a website utilizing material design lite for the aesthetics: Here are the scripts included: <script src="./mdl/material.min.js"></script> <script src="Scripts/angular.min.js"></script> The necessary .css fi ...

javascriptcsswindows-10-universalmaterial-design-lite

Attempting to extract content from a specific span element

I've been struggling to extract the text within a <span> element from a webpage. Every attempt I've made that doesn't result in an error has come back empty, with no output whatsoever. Here is the code I'm using: import time imp ...

pythonhtmlpython-3.xseleniumweb-scraping

Determining with jQuery if the right element has been successfully "dropped"

Imagine having 10 different draggable boxes and 2 droppable areas. You need to correctly match 5 boxes with droppable area 1 and the other 5 with droppable area 2. If a box intended for droppable area 1 is mistakenly dropped into area 2, it should not wor ...

javascriptphpjqueryhtmljquery-ui

Determining the Number of Form Values Equal to 0 Using jQuery

$("#scorecard").change(function() { var total = 0; $("#scorecard :checked").each( function() { if(parseInt($(this).val()) === 0) { total += 1; } else { total += 0; ...

jqueryhtml

Is there a way to verify if an ID includes more than one word?

I am trying to target a specific div with a unique id in jQuery: <div id="picture_contents_12356_title"></div> The '12356' is autogenerated and must be included in the id. I need to create a jQuery selector that combines "picture_co ...

javascriptjqueryhtmlcss

Looking to create a responsive image in a liquid file on Shopify

Recently, I added a new feature to my Shopify backend where users can upload images to a page. While I can see the images on the front-end, they are currently aligned to the right. My goal is to make these images responsive by default and expand to fit the ...

htmlcssjsonshopifyliquid

Exploring different sections of the website

I am looking to create a seamless navigation experience between controls on a webpage. Below is an example code snippet that outlines the functionality where a user can click on any component and be directed to another controller. Sample code: const app ...

javascripthtmlangularjs

Checking the opacity with an if/else statement, then adding a class without removing the existing class

This function is designed to check the opacity of the header, which fades out as a user scrolls down. If the opacity is less than 1, it disables clickability by adding the class "headerclickoff". However, there seems to be an issue with removing the clas ...

javascriptjquerycss