Creating visually pleasing HTML emails with uniform table data heights

Struggling with Outlook while designing an HTML template. My row has 2 td elements with different content, and setting equal heights is proving to be a challenge. The fixed height on the td causes issues when switching to mobile view in Outlook as text wraps and expands height unevenly.

<table>
<tr>
   <td>
        <h3>Content............</h3>
        <h3>Content.........</h3>
        <h3>Content........</h3>
        <h3>Content.......</h3>
   </td>
   <td>
        <h3>Content</h3>
        <h3>Content</h3>
   </td>
</tr>
</table>

The first column ends up taller than the second due to differing content heights. How can I ensure both columns have equal height dynamically without specific values? Media queries aren't effective for Outlook mobile.

htmlcsshtml-email

Answer №1

Give this a shot...


<style>
table, th, td {
  border: 1px solid black;
  height:100px;
  width:500px;
  text-align:center;
}
</style>

<table>
  <thead>
    <tr>
      <th>Header1</th>
      <th>Header2</th>
      <th>Header3</th>
      <th>Header4</th>
      <th>Header5</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Footer1</th>
      <th>Footer2</th>
      <th>Footer3</th>
      <th>Footer4</th>
      <th>Footer5</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Data1</td>
      <td>Data2</td>
      <td>Data3</td>
      <td>Data4</td>
      <td>Data5</td>   
    </tr>
    <tr>
     <td>Data1</td>
      <td>Data2</td>
      <td>Data3</td>
      <td>Data4</td>
      <td>Data5</td>
    </tr>
    
  </tbody>
  <tfoot>
    <tr>
      <td>Total Data</td>
      <td>Total Data</td>
      <td>Total Data</td>
      <td>Total Data</td>
      <td>Total Data</td>
    </tr>
  </tfoot>
</table>

Wishing you success in finding the solution.

Answer №2

If I am comprehending your concern accurately, it appears that the two td's have the same height already, and you simply desire to align the content at the top? The overall height is determined by the tallest element within the container. It is not feasible to achieve this with just CSS and dynamic height adjustments. You can either set a fixed height or allow the heights to follow normal rules.

<table border="1" cellpadding="0" cellspacing="0>
<tr>
   <td valign="top">
    <h3>Content............</h3>
    <h3>Content.........</h3>
    <h3>Content........</h3>
    <h3>Content.......</h3>
   </td>
   <td valign="top">
    <h3>Content</h3>
    <h3>Content</h3>
   </td>
</tr>
</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

Tips for incorporating API-provided CSS values into AngularJS expressions for stylish card customization

I am in the process of creating unique Pokemon cards that pull data from an API. My question is, how can I apply specific CSS styling to each card directly from the API, similar to how I have utilized AngularJS to render the information? So far, I have su ...

javascripthtmlcssangularjsjson

What is the best way to keep track of the number of checked checkboxes and add them to a separate div?

I need to select multiple checkboxes from different sections, count them, and then append the same number of sections to another div. ...

javascriptjqueryhtml

Press anywhere outside the container to conceal it along with the button

Utilizing an Angular directive to hide div elements when the user interacts outside of them has been effective. However, there is a specific issue that arises when clicking outside of a div on a button that toggles the visibility of the div. The 'ang ...

javascriptcssangularjshtml

Error: Unable to change image -- TypeError: Cannot assign value to null property 'src'

As I work my way through the textbook for one of my classes, I am practicing by building an image swapping page. The concept is simple - clicking on a thumbnail swaps out the main image and enlarges it as if it were linking to another web page. Despite fol ...

javascripthtmlcss

What kinds of font file formats are you utilizing?

In numerous projects, I have observed a common practice of using multiple font extensions such as .TTF, .WOFF, and .WOFF2. However, this can result in having multiple files for a single source. Imagine the clutter if one has several sources with different ...

csssass

Automatically refresh and update HTML content

I've created a temp.php file that generates output in JSON format: [{"Date":"2016-10-25 16:12:30","Temp":"1.00"},{"Date":"2016-10-25 16:24:05","Temp":"1.00"},{"Date":"2017-02-25 23:04:04","Temp":"1.00"},{"Date":"2017-02-25 23:05:34","Temp":"1.00"},{" ...

phphtmlajax

What is the best way to eliminate the underline in a text hyperlink?

I've encountered an issue with my CSS file. I tried using the code below: text-decoration: none; However, the text is not displaying as expected. I had to resort to using JavaScript for adding a hyperlink behind the text, which I believe is causing ...

jqueryhtmlcssmouseoverunderline

Add HTML syntax highlighting to a text area for coding purposes

I am facing a seemingly straightforward issue, but I worry that it may be too complex for me to handle on my own. My goal is to incorporate a textarea into a webpage where users can input HTML code, click a button, and have the interpreted HTML displayed i ...

javascriptjqueryhtmlcssjsp

The tabbing feature in bxslider disrupts the alignment of slides, making it

After encountering accessibility issues, I upgraded the bxslider library to version 4.2.3 for better support. Check out this example of bxslider where you can easily tab through the controls: http://jsfiddle.net/qax7w8vt/2/embedded/result/ The problem a ...

javascriptjqueryhtmlbxslider

What's the best way to preserve the aspect ratio of my background image while utilizing background-size: cover;?

I have a background image that I'm working with. Is there a way to preserve the aspect ratio of the image even when using background-size: cover;? Currently, the image fits perfectly on the screen but appears slightly distorted. I've experimented ...

htmlcssdebugging

Enhancing accessibility: the use of sr-only or aria-label

According to MDN: In this scenario, a button is designed to resemble a standard "close" button, featuring an X in the center. Since there is no visual cue indicating that the button closes a dialog, the aria-label attribute is utilized to provide this i ...

htmltwitter-bootstrapaccessibilitywai-aria

Removing a data entry from a PHP-generated MySQL table

In the process of developing a system, I have encountered a need to display database records in an HTML table. The functionality for creating the HTML table and retrieving data is working as expected. However, I am facing an issue with adding a column cont ...

phphtmlhtml-table

Can microdata be concealed using CSS without any problems?

Imagine having an HTML document filled with a substantial amount of text. Would it be considered "good" (or at least not bad) practice to include elements containing microdata that are hidden from the user's view? For example: <div style="display ...

htmlmicrodata

Adjust the width of individual columns in Bootstrap 4 responsive tables to ensure they have specific widths

I am currently working on setting up a table where specific columns require a fixed width and do not adjust automatically. Despite attempting a method to achieve this, I have encountered issues as the width still adjusts based on the length of the text. ...

csstwitter-bootstrapbootstrap-4twitter-bootstrap-4

Which tool is best for comparing and minimizing duplicated CSS style sheets?

In my current project, I am working with 2 CSS files. The first one serves as a "default" style sheet that is used in all websites created from the same templates. The second file contains the specific styles for our application. Both of these files are in ...

csscomparediff

jQuery loops through form fields and sets them as disabled

Trying to solve a question... In a form with multiple inputs, I only need to loop through the ones inside the div tagged player. <div class="player"> <input type="text" value="0" class="unit" /> <input type="text" value="0" class="unit" ...

javascriptjqueryhtml

CSS - Implementing responsive design to ensure optimal viewing experience on all devices

Card Matching Game Project Codepen Check out my CSS here, and find the rest of the code on Codepen since it's quite lengthy. const cards = document.querySelectorAll('.memory-card'); let hasFlippedCard = false; let lockBoard = false; let ...

htmlcss

Add unique content to a div upon page reload

Whenever the page is refreshed, I would like to add a random anchor from an array into a specific div. Here's my current code: <div id="exit-offer" class="exit-offer-dialog"> <div class="offer-content" id="banner-load"> <bu ...

javascriptjqueryhtml

What makes @font-face function on Safari but not on Firefox in Mac versions?

Can anyone help me troubleshoot a font issue on my website? I've added the following code to the CSS file, and it's working fine in Safari, but not in Firefox. I'm new to coding, so please bear with me if this seems like a basic question. I& ...

cssfirefoxsafarifont-face

Utilize checkboxes to sort through MySQLi data

Currently, I have a page that is populated with various types of posts such as news and blog entries. My goal is to implement checkboxes so that users can select which type of post they want to view. For example, I would like the option to check 'new ...

phpjqueryhtmlmysql