Decreasing the gap between two <tr> elements

Looking to showcase a company logo alongside the company name without using flexbox for compatibility with older browsers? Take a look at this simple HTML and CSS code snippet:

 <table style="background-color: cadetblue;width:100%;padding:10px">
        <tr>
            <td rowspan="3" width="130">
                <img src="Images/facebook.png" height="80" width="80" class="logo" />
            </td>
        </tr>
        <tr>
            <td class="name1">This is some text</td>
        </tr>
        <tr>
            <td class="name2">This is some text1</td>
        </tr>
 </table>

Take a peek at how it appears on screen here:

https://i.sstatic.net/OYnzt.png

Seeking advice on minimizing the spacing between "This is some text" and "This is some text1"? Avoiding flexbox due to older device constraints, utilizing float instead. Here are the accompanying styles:

 .logo {
            transform: translateX(2em);
        }
       

        .name1 {
            font-size: 25px;
            color: #e9c46a;
           
        }

        .name2 {
            font-size: 25px;
            color: white;
        }
    </style>

    .logo {
                transform: translateX(2em);
            }
           
    
            .name1 {
                font-size: 25px;
                color: #e9c46a;
               
            }
    
            .name2 {
                font-size: 25px;
                color: white;
            }
        </style>

Your assistance is highly valued.

Hello @Lars,

I attempted the first two HTMl versions you provided, but the Outlook browser seems to be displaying them differently as shown below:

https://i.sstatic.net/Q5CL5.png

Is there a method to eliminate those black background lines?

htmlcss

Answer №1

Here are some techniques you can use to bring your text content closer together. Consider applying a mix of border-collapse and vertical-align properties.

You can add a white border to the table cells to see how the rules impact the output visually.

border-collapse removes spacing between the cells.
vertical-align aligns the text to the top or bottom of the cell.

If an image is causing the text cell to expand, try reducing the size of the image. Adjusting the line-height using percentage or pixel values will also help bring the lines closer together.

.logo {
  transform: translateX(2em);
}

.name1 {
  font-size: 25px;
  color: #e9c46a;
}

.name2 {
  font-size: 25px;
  color: #ffffff;
}

.container {
  background: #ccc;
  padding-top: 20px;
  padding-bottom: 20px;
}

.container img {
  width: 80px;
  height: 80px;
}

.small-image img {
  width: auto;
  height: 40px;
}

.collapse-border table {
  border-collapse: collapse;
  border-spacing: 0;
}

.font-aligned .name1 {
  vertical-align: bottom;
}

.font-aligned .name2 {
  vertical-align: top;
}

.line-height td {
  line-height: 80%;
}

td {
  border: 1px solid #fff;
}
<div class="container ">
  <table style="background-color: cadetblue;width:100%;padding:10px">
    <tr>
      <td rowspan="3" width="130">
        <img src="https://placekitten.com/300/300" height="80" width="80" class="logo" />
      </td>
    </tr>
    <tr>
      <td class="name1">original: This is some text</td>
    </tr>
    <tr>
      <td class="name2">original: This is some text1</td>
    </tr>
  </table>
</div>

<div class="container small-image">
  <table style="background-color: cadetblue;width:100%;padding:10px">
    <tr>
      <td rowspan="3" width="130">
        <img src="https://placekitten.com/300/300" class="logo" />
      </td>
    </tr>
    <tr>
      <td class="name1">smaller image: This is some text</td>
    </tr>
    <tr>
      <td class="name2">smaller image: This is some text1</td>
    </tr>
  </table>
</div>

<div class="container collapse-border">
  <table style="background-color: cadetblue;width:100%;padding:10px">
    <tr>
      <td rowspan="3" width="130">
        <img src="https://placekitten.com/300/300" class="logo" />
      </td>
    </tr>
    <tr>
      <td class="name1">collapsed border: This is some text</td>
    </tr>
    <tr>
      <td class="name2">collapsed border: This is some text1</td>
    </tr>
  </table>
</div>

<div class="container font-aligned">
  <table style="background-color: cadetblue;width:100%;padding:10px">
    <tr>
      <td rowspan="3" width="130">
        <img src="https://placekitten.com/300/300" class="logo" />
      </td>
    </tr>
    <tr>
      <td class="name1">font align bottom: This is some text</td>
    </tr>
    <tr>
      <td class="name2">font align top: This is some text1</td>
    </tr>
  </table>
</div>

<div class="container line-height">
  <table style="background-color: cadetblue;width:100%;padding:10px">
    <tr>
      <td rowspan="3" width="130">
        <img src="https://placekitten.com/300/300" class="logo" />
      </td>
    </tr>
    <tr>
      <td class="name1">line height smaller: This is some text</td>
    </tr>
    <tr>
      <td class="name2">line-height smaller: This is some text1</td>
    </tr>
  </table>
</div>

<div class="container collapse-border font-aligned line-height">
  <table style="background-color: cadetblue;width:100%;padding:10px">
    <tr>
      <td rowspan="3" width="130">
        <img src="https://placekitten.com/300/300" height="80" width="80" class="logo" />
      </td>
    </tr>
    <tr>
      <td class="name1">every rule: This is some text</td>
    </tr>
    <tr>
      <td class="name2">every rule: This is some text1</td>
    </tr>
  </table>
</div>

Answer №2

Adjusting the vertical alignment of the texts using the valign attribute and eliminating padding from table cells to minimize space. Hopefully, this brings everything closer together.

Edit: I have reorganized the content within the table to enhance compatibility with email clients like Outlook.

.logo {
transform: translateX(2em);
}

.name1 {
font-size: 25px;
color: #e9c46a;
}

.name2 {
font-size: 25px;
color: white;
}
<table style="background-color: cadetblue; width:100%; padding:10px">
  <tr>
      <td width="130">
          <img src="https://picsum.photos/200/300?random=1" height="80" width="80" class="logo" />
      </td>

      <td style="padding: 0;">
          <table cellpadding="0" cellspacing="0">
              <tr>
                  <td class="name1" valign="bottom" style="padding: 0; vertical-align: bottom;">This is some text</td>
              </tr>
              <tr>
                  <td class="name2" valign="top" style="padding: 0; vertical-align: top;">This is some text1</td>
              </tr>                    
          </table>
      </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

Transmit data from list items in the HTML to a form

Based on my understanding, there are limited options available to style an <option> tag within a <select> dropdown and it appears quite plain. So I was thinking about creating a more visually appealing dropdown using <ul> <li> tags ...

htmlcssselecthtml-lists

The images on my website are not displaying properly on different devices

My attempt at creating a website for fun and testing purposes is facing issues when viewed on mobile devices. The images and specially positioned elements are not displaying correctly, extending beyond the page boundaries. I have tried adding the viewport ...

htmlcssimagepositioncross-browser

unable to show image retrieved from JSON data

Looking to showcase the data from my JSON objects, which are displayed in 2 images below https://i.stack.imgur.com/yhqFy.png https://i.stack.imgur.com/DUgFO.png In the data, I have properties like c_name, max_slots, and an array slots. Within the array, ...

javascripthtmlangularjsjson

Identify HTML elements within a textarea or text input using JavaScript while also accommodating the common special characters ">" and "<"

Is there a way to accurately detect HTML tags in textarea or text input fields before submitting a form? While it may seem straightforward to use regular expressions like /<\/?[^>]*>/gi.test(str) for this purpose, the challenge arises when de ...

javascripthtml

Creating a cross-platform file writer with PHP and JavaScript

My current challenge involves using buttons on an HTML page to trigger a PHP program that writes to a text file. Despite receiving a success message from my Ajax function, the file that should have been written to doesn't exist. Here's a snippet ...

javascriptphphtmlajax

Storing the value of the current vertical scroll position in a variable using jQuery

I'm currently dealing with a challenge that involves using the value of (window).scrollTop() as a crucial variable in my project. What I aim to accomplish is to retrieve and utilize the specific scroll value at a particular moment within an if stateme ...

javascriptjquerycssscopescrolltop

When users visit my contact HTML page, they are redirected to the contact PHP page, but unfortunately, the email is

I am currently facing an issue with my contact form. After filling out the form and hitting the "send" button, it redirects to the contact.php page but fails to send an email or work as intended. Can someone please assist me and identify what's causin ...

javascriptphpjqueryhtmlcss

Do you find yourself needing to double-click or refresh the menu in order to trigger AJAX requests?

Having a bit of trouble with a simple problem here... I'm trying to reload a table of images using AJAX when the user selects an option (a name in this case). It's functioning but requires either a hard refresh or selecting the same option twice ...

phpjqueryhtmlajax

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

Is it possible for me to overlap a text over hidden text, and if the hidden text becomes visible through JavaScript, my text will shift to the right of the now visible hidden text?

I'm currently working on a website for a company that requires users to complete all the information before proceeding. To achieve this, I created a form with the following code: <form action="Owners Infoback.php" onsubmit="return validateFo ...

javascripthtmlcss

Grid layout with Tailwind

I'm facing a challenge in my Angular project where I need to create a grid layout with 2 rows and 6 columns using Tailwind CSS. The actors array that I am iterating through contains 25 actors. My objective is to show the first 12 actors in 2 rows, fo ...

cssangularcss-gridtailwind-css

What is the best way to create a Google-like style for the HTML <option> tag?

Can anyone demonstrate how to create fields for birthday and gender like the ones on the gmail sign up page? Your help is appreciated. Thank you! ...

htmltagsstyles

Iterating through the entire table presents a challenge when trying to display multiple values on a single element

I'm facing a challenge in dynamically adding data from an SQL Table to HTML. Here is my loop: @foreach (var item in Model.ModulesSubStages) { <div class="row"> <div class="col-md-6"><a id="courseRed ...

c#htmlcssasp.netrazor-pages

Customizing the appearance of arrows in a drop-down menu option

I've been working on a dropdown menu box and an arrow, and for the most part it's looking good. However, I've run into an issue with the arrow icon not changing color when the user is focused on it. I'm using the :focus pseudo-class to ...

cssfrontend

"Encountering an error of undefined index when dealing with multiple file

I've encounter an issue with this code but can't seem to figure out what's wrong. Any help would be greatly appreciated. Kindly refrain from marking it as a duplicate too quickly; I've already gone through similar questions without find ...

phphtmlimage-uploadingforms

Issues have arisen with the main background image in IE7 on ProLoser's AnythingSlider

Check out my website: Everything is working perfectly with AnythingSlider in all browsers except for IE7 - not really a surprise. The background image of the entire page seems to be offset differently depending on the browser size. After some investigatio ...

internet-explorer-7cssanythingslider

Tips on using htmlspecialchars in combination with a href:To safely include links in

If I have the following code: $text = "please visit this <a href='http://example.com'>site</a>." $text = htmlspecialchars($text); echo $text; The output will be please visit this <a href='http://example.com'>site< ...

phphtmlhyperlink

I am encountering an issue where my codeigniter controller is unable to load my model

Below is the code for my controller: defined('BASEPATH') OR exit('No direct script access allowed'); class Welcome extends CI_Controller { function __construct() { parent::__construct(); $this->load->model('User_model') ...

phpjqueryhtmlcsscodeigniter

Aligning Content in the Header

Currently, I am attempting to place a logo on my WordPress site right at the top of the header above the menus and in the center. Even though I've positioned it at the top, I'm struggling to align it horizontally in the center. I've experime ...

jqueryhtmlcsswordpress

Creating a React component with a circular loader that displays percentage and texts using Material-UI

I've developed a CircularLoader component using Material UI. The issue I'm facing is that when the variant is set to 'indeterminate', the loader should display without any percentage indication. However, if the variant is 'determin ...

cssreactjsreact-hooksmaterial-ui