Question

我正在尝试对齐两个表格的边框。请看一下这个小例子 http://jsfiddle.net/kf82J/2/

在Internet Explorer和Chrome上，右边框未对齐，但适用于Firefox。

我的目标是能够在标题中间绘制一条“对齐”宽度的线条，用文字很难解释，只需检查jsfiddle。

以下相同代码

<table style="width:100%;border-collapse: collapse;">
    <tr style="height: 10px;">
        <td style="width: 1px;">
        </td>
        <td rowspan="2" style="font-size:19pwhite-space:nowrap;x;width:1px;">
            Title &nbsp; &nbsp;
        </td>
        <td style="height:50%;">
        &nbsp;
        </td>
    </tr>
    <tr style="height: 10px;">
        <td>
        </td>
        <td style="height:50%;border-top: 1px solid black; border-right: 1px solid black;">
        &nbsp;
        </td>
    </tr>
</table>
<table  style="width:100%;border-collapse: collapse;border:1px solid black;border-top:none;">
    <tr>
        <td>Content</td>
    </tr>
</table>

Answer 1

从表

的css中删除以下行

 border-collapse: collapse;

它适合我。

Answer 2

或者，您可以尝试为第一个表添加透明边框

<table style="border:1px solid transparent;>

HTML表格和边框对齐方式

2 个答案: