Question

所以我有一个2x2的桌子，它将成为我网站的整体布局。我希望将两个顶部单元格连接为一个，因此我已将左侧（右侧单元格）和右侧（左侧）的边框设置为0，但是两个单元格之间仍然有一些空间，因此它们不要连接。

请记住，我希望两个底部单元格之间留有间隔！

右上角单元格的CSS：

.one {
  width: 25%;
  border: 3px solid black;
  border-right: 0px;
}

左上方单元格的CSS：

.two {
  border: 3px solid black;
  border-left: 0px;
}

图片：

PREVIEW

Answer 1

.one {
  width: 25%;
  border: 3px solid black;
  border-right: 0px;
  position: relative;
}
.ghost {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 10;
  border-top: 3px solid black;
  border-bottom: 3px solid black;
  left: 10px;
  top: -15%;
}
.two {
  border: 3px solid black;
  border-left: 0px;
}
.three {
  border: 3px solid black;
}
.four {
  border: 3px solid black;
}

<table>
  <tr class="row-1">
    <td class="one">cell 1<div class="ghost"></div></td>
    <td class="two">cell 2</td>
  </tr>
  <tr>
    <td class="three">cell 3</td>
    <td class="four">cell 4</td> 
</table>

这是一个hack，但是我敢肯定还有比这更好的方法。基本上，这只是添加另一个具有相同高度且仅具有顶部和底部边界的元素，然后将其放置在顶部的两个单元格之间。再说一次，这完全是黑客，我建议您等待一个更好的答案，但是，如果您没有得到答案，我想这可能是一个失败的选择。另外，如果使用此选项，则父项（.one）具有position: relative非常重要，因为.ghost会寻找具有非静态位置的父项进行引用。希望您能得到比这更好的答案。

Answer 2

我认为HTML5仍支持属性colspan：

/*This only to confirm whether each cell has padding/spacing */
.addBorder{
	border: 1px solid #000;
}

<table class="addBorder">
<tr>
	<td colspan="2" class="addBorder" align="center">Head</td>
</tr>
<tr>
	<td class="addBorder">content 1</td>
	<td class="addBorder">Content 2</td>
</tr>
</table>

我希望我的桌子在顶部连接（css / html）

2 个答案: