如何在2个相邻表中使水平边框折叠 [英] How do I make the horizontal borders collapse in 2 adjoining tables
本文介绍了如何在2个相邻表中使水平边框折叠的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
有人可以告诉我如何使2个相邻表格的相邻水平边框折叠，以便它们符合表格边框的其余部分吗？谢谢。
< ！DOCTYPE HTML >
/ * http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
许可证：无（公共领域）
* /
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，标签，传奇，
表，标题，tbody，tfoot，thead，tr，th，td，
文章，一边，画布，细节，嵌入，
图，figcaption，页脚，标题， hgroup，
menu，nav，output，ruby，section，summary，
time，mark，audio，video {
margin：0;
填充：0;
border：0;
字体大小：100％;
字体：inherit;
vertical-align：baseline;
}
/ * HTML5显示 - 旧版浏览器的角色重置* /
文章，旁边，详细信息，figcaption，图，
页脚，标题，hgroup，菜单，导航，部分，段落{
display：block;
}
body {
line-height：1;
}
ol，ul {
list-style：none;
}
blockquote，q {
quotes：none;
}
blockquote：之前，blockquote：之后，
q：之前，q：之后{
content：'';
内容：无;
}
表{
border-collapse：collapse;
border-spacing：0;
}
/ *这是MYER RESET的结束* /
table {
margin：auto;
border-collapse：collapse;
}
表，td {
border：2px solid black;
}
td {
padding：30px;
background-color：#ededed;
}
td img {
display：block;
margin-left：auto;
margin-right：auto;
}
< 表 > < tbody > < tr > < td > 单元格A1 < / td > < td > 单元格A2 < / td > < td > 单元格A3 < / td > < / tr > < / tbody > < / table >
< 表 class = table1 > < tbody > < tr class = table1 > < td class = table1 > Cell B1 < / td > < td class = table1 > 单元格B2 < / td > < td class = table1 > 单元格B3 < / td > < td class = table1 > 单元格B4 < / td > < / tr > < / tbody > < / table >
我尝试过：
我创建了一个带有border-collapse的类：折叠并将其分配给表，表行和td共同分别为第二个表分配，但它没有效果。
解决方案
不幸的是，你无法折叠两个表格的边框，但是可以选择隐藏第一个表格的底部边框：
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）的顶部边框，具体取决于哪个更宽。
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.
<!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.
解决方案
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.
这篇关于如何在2个相邻表中使水平边框折叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
