2

我有一张有点像这样的桌子:

/---+---+---+---+---+---\
| A | B | C | D | E | F |
\---+---+---+---+---+---/

我想让 A 和 B 在视觉上看起来在同一个单元格中,但实际上并不是在同一个单元格中。

为此,我需要将 A 和 B 之间的边框和填充变为 0px。

但是,设置 TD 填充(或边距!)对我不起作用。那么,关于我做错了什么的任何想法?

4

2 回答 2

2

使用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;   
}

示例页面:

http://jsfiddle.net/h6DWg/1/

编辑

OP 要求保持边界不折叠,保持边界不折叠的新示例位于http://jsfiddle.net/h6DWg/10/

于 2012-07-20T19:02:00.380 回答
1

我有一个不同的解决方案,虽然比之前建议的稍微复杂一些,但我相信它会给你更多的灵活性来应用这个解决方案。

首先,它确实需要一些 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% ,以便在表结构中将它们适当地隔开。

于 2012-07-20T19:36:42.460 回答