html - 自动扩展外部表以防止由于位置覆盖：绝对

Question

这是之前发布的问题的延续：Center a table and align right a div。在上一个问题上，j08691 提供了一个完美的解决方案，可以将表格居中并右对齐 div。但是现在我遇到了 pageDiv 和 PageLinks 元素如果我将它们放在外部表中相互重叠的问题。例如，请参见：http: //jsfiddle.net/hockchailim/uECFg/4/。有没有办法自动扩展外部表以防止这种覆盖？

<table id="outerTable" border="1">
<tbody>
    <tr>
        <td>
            <div id="pagingDiv" style="width:100%;">
                <div id="goToPage" style="float:right">&nbsp; Page 3 of 42 | Page#:
                    <input style="height:14px;width:21px;" /> <a href="#go">GO</a>

                </div>
                <table id="pageLinks" style="margin:auto;">
                    <tbody>
                        <tr>
                            <td> <a href="#first" title="Click to go to first page.">1</a>
                            </td>
                            <td> <a href="#first" title="Click to go to second page.">2</a>
                            </td>
                            <td> <a href="#first" title="Click to go to second page.">3</a>
                            </td>
                            <td> <a href="#first" title="Click to go to second page.">4</a>
                            </td>
                            <td> <a href="#first" title="Click to go to second page.">5</a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            This is too short,  <br/> 
            it caused goToPage and pageLinks <br/>
            on previous cell is overlaying each other
        </td>
    </tr>    
</tbody>                
</table>      

Answer 1

这就是你所追求的吗？我从 Div 中删除了定位

#pagingDiv {

}
#goToPage {

    right:0;
}

http://jsfiddle.net/uECFg/6/

Answer 2

这对你有用吗？我删除了一些样式

#goToPage {
    position:relative;
    margin-left:0;
    margin-right:0;
    float:right;
}

http://jsfiddle.net/uECFg/9/[][1]

[1]： http: //jsfiddle.net/uECFg/9/ <----- 更新