Very little spacing between the TR tag

HTML & CSS
1 
<style>

table {
    border-collapse: collapse;
    border-spacing: 0 1em;
}

td {

    font-family: Verdana,Geneva,sans-serif;
	font-size: 60px;
    font-weight: bold;
    text-align: center;
}

</style>
<table><tr><td style="vertical-align: baseline;">AB</td></tr>
<tr><td style="vertical-align: top;">CDE</td>
</tr></table>

I can’t seem a way to get these to rows closer together. Is there a way to have very little space so the look would be almost like AB is stacked just above CDE?

Thank you

2

Did you try adjusting line-height?

5 Likes
3

Thank you, that did it.

4

FYI.

IF {border-collapse:collapse} is applied; THEN {border-spacing:...} has no effect.

IF {border-collapse:collapse} is NOT applied; THEN {border-spacing:0 1} will increase the vertical space between the rows (which is not what you wanted)…

Try it yourself:

Comment out {border-collapse:collapse} in the following working page to compare the effects. Then just for fun, swap the border-spacing digits and see what happens.

Then restore {border-collapse} and comment out {border-spacing} to compare the effects.

You can add vertical-align back in again and see that it has no visible effect on the content shown. It does not affect the space between rows. The height of the content in one row of two or more cells would need to be different for vertical-align to have a visible effect in that row.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="css/stylesheet.css">
    <title>template</title>
<!--
https://www.sitepoint.com/community/t/very-little-spacing-between-the-tr-tag/293675/4
-->
    <style>
table {
    border-collapse:collapse;
    border-spacing:0 1em;
}
td {
    font-family:Verdana,Geneva,sans-serif;
    font-size:60px;
    font-weight:bold;
    text-align:center;
    line-height:.8125;
    border:1px solid red;
}
    </style>
</head>
<body>

<table>
    <tbody>
        <tr>
            <td>CDE</td>
            <td>AB</td>
        </tr>
        <tr>
            <td>AB</td>
            <td>CDE</td>
        </tr>
    </tbody>
</table>

</body>
</html>
1 Like
5

@javascript7

Have you tried td {padding:0; outline: 1px solid red;}instead of border?

6

The border was my add for visibility purposes with the reduced line height; outlines overlap, confusing.

td {padding:0} would reduce the space around the cell contents a couple more px.(good call).

:slight_smile:

2 Likes
7

Yes, and it worked fine. However, if I put that in a server sent html email it doesn’t work. None of the letter show. If I leave that code line out, the letter shows but the spacing is off.

8

I will check that out soon and let you know. Thank you for that.

9

If the problem continues, please post a “working page” with the complete code from an e-mail message. HTML e-mails and web pages are continents apart. HTML e-mail should have been mentioned in your first post.

10

I’m not sure what the context is of what your doing.
But if line height fails to work with emails then you might try a workaround like this.

It’s a bit hacky but if it’s for visual purposes only it should work just fine.

162×143 1.39 KB

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Line Height Workaround</title>
<style>
table {
  border-collapse: collapse;
  border-spacing: 0 1em;
}
td {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 60px;
  font-weight: bold;
  text-align: center;
  border: 1px solid;
}
span {
  display: block;
  margin-top: -26px
}
</style>

</head>
<body>

<table>
  <tr>
    <td>AB<span>CDE</span></td>
  </tr>
</table>

</body>
</html>
11

If I use that in a html emailer, I set this:

12

Didn’t realize that is the case. Sorry I should that mentioned that.

This is the code that I get no display:

<html>
<head>
    <title></title>
</head>

<style>

table {
    border-collapse: collapse;
    border-spacing: 0 1em;
}

td {

    font-family: Verdana,Geneva,sans-serif;
	font-size: 60px;
    font-weight: bold;
    text-align: center;
    line-height: .8;
}

</style>
<body>

<table><tr><td style="vertical-align: baseline;font-size: 80px; color: #4c659b;">AB</td></tr>
<tr><td style="vertical-align: top;">CED</td>
</tr></table>

</body>
</html>
13

Did you try the working page that I posted? If not, Please copy that code to a file and open it in your browser. See what it looks like. Then send it as an e-mail and see how it looks in your e-mail reader. Send a screen shot if possible.

14

It’s either stripping the span or span styles away then.

Hey I’m curious, which html emailer are you using?
How do I get access to it so I can do some testing with it?

1 Like
15

If you have other code in your e-mail other than the code that you have shown us, all bets are off. You MUST show all of your code so we can see the full context of the code.

To the best of my knowledge, this uses e-mail friendly HTML and inline CSS.

<html>
<head>
    <title>HTML email</title>
</head>
<style>
/* */
</style>
<body>
<table style="font-family:Verdana,Geneva,sans-serif; border-collapse:collapse;">
    <tr>
        <td style="font-size:80px; line-height:64px; font-weight:bold; text-align:center; color:#4c659b; border:1px solid red;">AB</td>
    </tr>
    <tr>
        <td style="font-size:60px; line-height:48px; font-weight:bold; text-align:center; border:1px solid red;">CED</td>
    </tr>
</table>
</body>
</html>

As before, copy it to a file and test it alone.

If all else fails, try reading
https://templates.mailchimp.com/getting-started/html-email-basics/

2 Likes
16

Working page is fine.

Here is the emailer:

17

I decided to forward the email to my Samsung cell phone and the codes from prior emails work fine. On my local machine, windows pc, ms outlook it doesn’t work for the line height. That is the first time there has been a difference between the 2 over the years of sending emails.

18

Please see my last post regarding the emailer.

19

Did you try using pixels for the line-height? (post #15)

In Ray.H’s code, post #10, try adding a break tag after the “AB”… just guessing.

<td>AB<br><span>CDE</span></td>

1 Like
20

I was just reading through that mailchimp reference too.
I’ve also seen that most people use a transitional doctype as well, gotta keep the code in the 90’s.

Oh that doesn’t surprise me at all, I suspect that might be the equivalent of IE3 :no_mouth:

I use Thunderbird, but I don’t accept html emails.

I was actually using the <br> tag before I posted the code. The display block on span should have eliminated the need for it. But your right the <br> should work without needing any styles.

Perhaps if the span had inline styles on it then it might work then too.