HTML表格删除特定列之间的填充

Question

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

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

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

为此，我需要将 A 和 B 之间的边框和内边距设为 0px。

但是，设置 TD 填充（或边距！）对我不起作用。那么，关于我做错了什么有什么想法吗？

Answer 1

使用 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/

Answer 2

我有一个不同的解决方案，虽然比之前建议的稍微复杂一些，但我相信它会给您在如何应用该解决方案方面提供更大的灵活性。

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