Question

even after setting the tr:last-child’s border: none, border is still visible. The edit button should be after the last row. But it got position left. http://jsfiddle.net/priyaa2002/mBfk8/ Here is how it should be

Answer 1

You have a floating <tr> and a floating </div>:

<div id="wrapper">
    <div class="para">
        <table id="info-table">
            <tr>
                <td>name:</td>
                <td id="name">name</td>
            </tr>
            <tr>
                <td>id:</td>
                <td id="myid">myuid</td>
            </tr>
            <tr>
                <td>email:</td>
                <td id="email">[e-mail]</td>
            </tr>
            <tr> <!-- WHY? -->
         </table>
    </div>
<div class="edit">
    <button type="submit">edit</button>
</div>
</div> <!-- WHY? -->

Get rid of them like so:

<div id="wrapper">
    <div class="para">
        <table id="info-table">
            <tr>
                <td>name:</td>
                <td id="name">name</td>
            </tr>
            <tr>
                <td>id:</td>
                <td id="myid">myuid</td>
            </tr>
            <tr>
                <td>email:</td>
                <td id="email">[e-mail]</td>
            </tr>
         </table>
    </div>
<div class="edit">
    <button type="submit">edit</button>
</div>

In the future validate your HTML 😉