0

所以我在一张桌子上并排有 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/

任何想法？

4

3 回答 3

1

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

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

像这样

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

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

于 2013-09-24T04:05:35.120 回答
0

我通常使用cellspacing表格的属性来做到这一点。

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

看例子：这里看代码

于 2013-09-24T03:37:48.457 回答
0

由于您不能在表格元素上使用 box-sizing，因此我真的看不出一个简单的出路。我认为最好的方法是在表格单元格内使用 div 来显示边框。

于 2013-09-24T03:38:42.980 回答