How do I make the horizontal borders collapse in 2 adjoining tables

Question

0.00/5 (No votes)

See more:

Can someone please tell me how I can make the adjacent horizontal borders of the 2 adjoining tables collapse so that they conform to the rest of the table borders? Thank you.

HTML

<!DOCTYPE HTML>

    /* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, paragraph {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
    /*THIS IS THE END OF THE MYER RESET*/
    
table {
    margin: auto;
    border-collapse: collapse;
    }
table, td {
    border: 2px solid black;
    }
td {
    padding: 30px;
    background-color: #ededed;
    }
td img{
    display: block;
    margin-left: auto;
    margin-right: auto;
}
    
    
              
            
            <table><tbody><tr>           <td>Cell A1</td><td>Cell A2</td><td>Cell A3</td>        </tr>    </tbody></table>
    
              

              
    <table class="table1"><tbody><tr class="table1">            <td class="table1">Cell B1</td><td class="table1">Cell B2</td><td class="table1">Cell B3</td><td class="table1">Cell B4</td></tr>    </tbody></table>

What I have tried:

I created a class with border-collapse: collapse and assigned that to the table, the table row, and the td collectively and separately for the 2nd table but it had no effect.

Posted 4-May-18 17:54pm

Member 13798280

Updated 7-May-18 4:55am

RickZeeland

v4

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

User 7429338 · Answer 1 · 2018-05-07T04:56:00

You can't collapse the border of two tables like that unfortunately, but it would be an option to hide the bottom border of your first table:

CSS:

.table0
{
    border-bottom:0px;
}

HTML:

<table class="table0">
    <tbody>
        <tr>
            <td class="table0">Cell A1</td>
            <td class="table0">Cell A2</td>
            <td class="table0">Cell A3</td>
        </tr>
    </tbody>
</table>

Alternatively you could hide the top border of the second table (table1), depending on which is wider.