html - 自动扩展外表以防止由于位置 : absolute 而发生重叠

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/