Question

我的桌子有点像这样：

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

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

要做到这一点，我需要让A和B之间的边框和填充变为0px。

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

Answer 1

使用 CSS 这可能非常简单，尤其是如果您希望第1列和第2列始终合并，如下所示。

: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下的50％[colspan ='2']＆gt; div，以便在表结构中正确地将它们分开。

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

2 个答案:

代码：

示例页面：

修改