Member 13798280 Ответов: 1

Как сделать так, чтобы горизонтальные границы свернулись в 2 соседних таблицах


Может ли кто-нибудь сказать мне, как я могу заставить соседние горизонтальные границы 2 соседних таблиц свернуться так, чтобы они соответствовали остальным границам таблицы? Спасибо.

<!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>


Что я уже пробовал:

Я создал класс с border-collapse: collapse и назначил его таблице, строке таблицы и td вместе и отдельно для 2-й таблицы, но это не имело никакого эффекта.

1 Ответов

Рейтинг:
0

User 7429338

К сожалению, вы не можете свернуть границу двух таблиц таким образом, но это был бы вариант скрыть нижнюю границу вашей первой таблицы:

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>


В качестве альтернативы вы можете скрыть верхнюю границу второй таблицы (table1), в зависимости от того, какая из них шире.


Member 13798280

Поскольку это были таблицы с разным количеством столбцов (таблицы разной ширины), не будет ли обнуление одной из границ означать, что граница не будет отображаться по всей ширине, так что некоторые ячейки не будут иметь верхней или нижней части в любом случае?