我有一张有点像这样的桌子:
/---+---+---+---+---+---\
| A | B | C | D | E | F |
\---+---+---+---+---+---/
我想让 A 和 B 在视觉上看起来在同一个单元格中,但实际上并不是在同一个单元格中。
为此,我需要将 A 和 B 之间的边框和填充变为 0px。
但是,设置 TD 填充(或边距!)对我不起作用。那么,关于我做错了什么的任何想法?
我有一张有点像这样的桌子:
/---+---+---+---+---+---\
| A | B | C | D | E | F |
\---+---+---+---+---+---/
我想让 A 和 B 在视觉上看起来在同一个单元格中,但实际上并不是在同一个单元格中。
为此,我需要将 A 和 B 之间的边框和填充变为 0px。
但是,设置 TD 填充(或边距!)对我不起作用。那么,关于我做错了什么的任何想法?
使用CSS这很容易,特别是如果您希望第一列和第二列始终合并,如下所示。
:nth-child(2)
选择这个css中每一行的第二个td
:first-child
选择这个css中每一行的第一个td,也可以写成:nth-child(1)
table
{
border-collapse:collapse;
}
td
{
padding:4px;
border:1px solid black;
}
tr td:first-child
{
padding-right:0;
margin-right:0;
border-right:0;
}
tr td:nth-child(n)
{
padding-left:0;
margin-left:0;
border-left:0;
}
OP 要求保持边界不折叠,保持边界不折叠的新示例位于http://jsfiddle.net/h6DWg/10/
我有一个不同的解决方案,虽然比之前建议的稍微复杂一些,但我相信它会给你更多的灵活性来应用这个解决方案。
首先,它确实需要一些 css 代码,如下所示:
td:not([colspan='2']) {
/*your styling here*/
}
td[colspan='2'] {
display: table-row;
}
td[colspan='2'] > div {
display: table-cell;
width: 50%;
/*same styling here*/
}
最后,html:
<table>
<tbody>
<tr>
<td colspan='2'>
<div id="cell-a"></div>
<div id="cell-b"></div>
</td>
<td id="cell-c"></td>
<!--and so on-->
基本上,css 模仿表格的内置显示以优化表格行样式。这将允许 css 完成所有工作,此外,将允许您将 colspan='2' 放在任何地方,以便在需要的地方将两个单元格加倍。我已经在本地进行了测试以确保它有效。
编辑: 刚刚在 td[colspan='2'] > div 下添加了 width: 50% ,以便在表结构中将它们适当地隔开。