Question

所以我在桌子上并排放置了2 td。第一个td有一个边框，第二个没有边框，但里面的元素有一个，我需要两个边框排成一行（顶部和底部）

那么有没有办法让元素“越过”边界空间，因为它不存在？如果我尝试在td中增长元素，td会增长并保持1px的边框间距，即使它不在那里。

粗糙的HTML：

<table><tr>
<td class="border">1</td><td class="noborder"><span class="border">Text</span></td>
</tr></table>

看到这个小提琴，以获得更好的图片:) http://jsfiddle.net/LcGks/1/

有什么想法吗？

Answer 1

我认为你想做的事情会使第一和第二个td的内容高度不同。在表中，行中的所有元素都具有相同的高度，所以我认为你不应该使用表格。

否则我可以想到的解决方法是对td.noborder应用顶部和底部边框，这将使两个td的排列。

像这样

td.noborder {
    border: solid blue;
    border-width: 1px 0px;
    padding: 0px;
}

见http://jsfiddle.net/LcGks/1/

Answer 2

我通常使用表格的cellspacing属性来执行此操作。

<table cellspacing="2px" border="1px">
    <tr>
    <td class="border">1</td><td class="noborder"><span class="border">Text</span></td>
    </tr>
</table>

参见示例：here并查看Code

Answer 3

由于你不能在表格元素上使用box-sizing，我真的没有看到一个简单的方法。我认为最好的方法是在表格单元格中使用div来显示边框。

如何并排使用2 td的边框空间？

3 个答案: