0

これは、以前に投稿された質問の続きです: 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>
4

2 に答える 2

0

これはあなたが求めているものですか？Div からポジショニングを削除しました

#pagingDiv {

}
#goToPage {

    right:0;
}

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

于 2013-08-28T15:04:44.480 に答える