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

Question

所以我在 table 上并排放置了 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>

请参阅此 fiddle 以获得更好的图片:) 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/