HTML表和边框对齐

Question

I'm trying to align two table's borders. Please take a look on this small example http://jsfiddle.net/kf82J/2/

On Internet Explorer and Chrome, the right border is not aligned, but works on Firefox.

My goal is to be able to draw a line that "aligns" width the middle of the title, it's difficult to explain with words, just check the jsfiddle.

Same code below

<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

Remove below line from css for table

 border-collapse: collapse;

It worked for me in fiddle.

Answer 2

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

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