<tr>

    <table id='tbl' border="0" cellspacing="0" cellpadding="0" background="#ddd" width="100%"> 

        <tbody id='tbd'>

        <tr>

            <td class=write_head style="width:85px">학력#<br>

                 <span onclick="add_tr()" style="cursor:pointer;"><img src="<?=$board_skin_path?>/img/btn_file_add.gif"></span> 

                <span onclick="del_row();" style="cursor:pointer;"><img src="<?=$board_skin_path?>/img/btn_file_minus.gif"></span>

             </td>

            <td>

                <input class='ed' style="width:99%;" name="opty_subj[]" itemname="학력" required >

            </td>

            <tr><td colspan=2 height=1 bgcolor=#e7e7e7></td></tr>

        </tr>

        </tbody>

    </table>

</tr>

--------------------------------------------

<script>

    var tbl = document.getElementById('tbl');

    var thd = document.getElementById('thd');

    var tbd = document.getElementById('tbd');

    var tr = null;

    var td = null;

    var x=1, y=1;

    function add_tr() 

    {

        // 행 제목 추가

        tr = document.createElement('tr');

        tbd.appendChild(tr);

        td = document.createElement('td');

        tr.appendChild(td);

        add_input('opty_subj[]');

        // 열의 갯수에 따라 추가된 행의 열 추가

        var thd_td = thd.getElementsByTagName('td');

        for (i=0; i<thd_td.length-1; i++)

        {

            td = document.createElement('td');

            tr.appendChild(td);

            add_input('opt[][]');

        }

    }

    function add_input(name)

    {

        var inp = document.createElement('input');

        inp.setAttribute('class', 'ed');

        inp.setAttribute('name', name);

        td.appendChild(inp);

    }

    function del_row()

    {

        var tbd_tr = tbd.getElementsByTagName('tr');

        //document.getElementById('msg').innerHTML = tbd_tr.length;

        if (tbd_tr.length > 1)

            tbd.deleteRow(tbd_tr.length-1);

    }

</script>

추가 삭제는 잘 되는 상황입니다.

헌데 사진처럼 추가를 학력 글 바로 밑에 나와버리는데

이런식으로

나오게 하고 싶은데

어디를 고쳐야하나요?