0

I am trying to manually add an <hr> between some rows in a table in a html email (Outlook doesn't support css classes).

The approach suggested here doesn't seem to work for me.

I tried both Chrome and Firefox.

I also tried the following code, but I can't get a continuous line between rows:

    <!doctype html>
    <html>
        <head>
            <title>Test Table Styling</title>
        </head>
        <body>
            <h1>Test</h1>
            <table>
                <tbody>
                    <tr>
                        <th>head1</th>
                        <th>head2</th>
                        <th>head3</th>
                    </tr>
                    <tr>
                        <td style="border-top-color: blue;border-top-style: solid;"/>
                        <td style="border-top-color: blue;border-top-style: solid;"/>
                        <td style="border-top-color: blue;border-top-style: solid;"/>
                    </tr>
                    <tr>
                        <td style="border-top-color: green;border-top-style: solid;">blah</td>
                        <td style="border-top-color: green;border-top-style: solid;">blah2</td>
                        <td style="border-top-color: green;border-top-style: solid;">blah3</td>
                    </tr>
                    <tr style="border-top: 1px solid #E9E9E9;">
                        <td>blah4</td>
                        <td>blah5</td>
                        <td>blah6</td>
                    </tr>
                </tbody>
            </table>
            <hr />
            <table>
                <tbody>
                    <tr>
                        <th>head1</th>
                        <th>head2</th>
                        <th>head3</th>
                    </tr>
                    <tr style="border-bottom: 1px solid #000;">
                        <td >blah</td>
                        <td >blah2</td>
                        <td >blah3</td>
                    </tr>
                    <tr>
                        <td>blah4</td>
                        <td>blah5</td>
                        <td>blah6</td>
                    </tr>
                </tbody>
            </table>
        </body>
    </html>
Dhia
  • 328
  • 2
  • 18
Eric
  • 2,861
  • 6
  • 28
  • 59

1 Answers1

2

You can use border-collapse to remove the gaps between table cells:

table {border-collapse: collapse}
<!doctype html>
    <html>
        <head>
            <title>Test Table Styling</title>
        </head>
        <body>
            <h1>Test</h1>
            <table>
                <tbody>
                    <tr>
                        <th>head1</th>
                        <th>head2</th>
                        <th>head3</th>
                    </tr>
                    <tr>
                        <td style="border-top-color: blue;border-top-style: solid;"/>
                        <td style="border-top-color: blue;border-top-style: solid;"/>
                        <td style="border-top-color: blue;border-top-style: solid;"/>
                    </tr>
                    <tr>
                        <td style="border-top-color: green;border-top-style: solid;">blah</td>
                        <td style="border-top-color: green;border-top-style: solid;">blah2</td>
                        <td style="border-top-color: green;border-top-style: solid;">blah3</td>
                    </tr>
                    <tr style="border-top: 1px solid #E9E9E9;">
                        <td>blah4</td>
                        <td>blah5</td>
                        <td>blah6</td>
                    </tr>
                </tbody>
            </table>
            <hr />
            <table>
                <tbody>
                    <tr>
                        <th>head1</th>
                        <th>head2</th>
                        <th>head3</th>
                    </tr>
                    <tr style="border-bottom: 1px solid #000;">
                        <td >blah</td>
                        <td >blah2</td>
                        <td >blah3</td>
                    </tr>
                    <tr>
                        <td>blah4</td>
                        <td>blah5</td>
                        <td>blah6</td>
                    </tr>
                </tbody>
            </table>
        </body>
    </html>

Some of the answers on the older question you were looking at achieved the same effect using the "cellpadding" and "cellspacing" attributes on the table. This still works, but is generally considered an outdated technique compared to CSS.

Daniel Beck
  • 20,653
  • 5
  • 38
  • 53