0

ページに 3 つの表があります....3 つの表がすべて重なっています....3 つの表が重ならないようにする方法....

http://jsfiddle.net/WG7kk/3/embedded/result/

<table id="inventoryTable" class="table dataTable" aria-describedby="inventoryTable_info">
                        <thead>
                            <tr class="inventoryListHeading" role="row" style="background-color: #1a4567; color: white;">
                                <th class="sorting_disabled" role="columnheader" rowspan="1" colspan="1" style="width: 103px;">Qty</th>
                                <th class="sorting_disabled" role="columnheader" rowspan="1" colspan="1" style="width: 123px;">MFG P/N</th>
                                <th class="sorting_disabled" role="columnheader" rowspan="1" colspan="1" style="width: 85px;">Unit Price</th>
                                <th class="sorting_disabled" role="columnheader" rowspan="1" colspan="1" style="width: 134px;">Ext. Price</th>
                            </tr>
                        </thead>

                        <tbody role="alert" aria-live="polite" aria-relevant="all">
                            <tr id="row_1" class="odd">
                                <td class=" "><div id="fdCompanyName_1"><a href="/Customer/index/?step=modify&amp;cid=1">FQ Systems</a></div></td>
                                <td class=" "><div id="fdCustId_1"><a href="/Customer/index/?step=modify&amp;cid=1">1</a></div></td>
                                <td class=" "><div id="fdContactName_1"><a href="/Customer/index/?step=modify&amp;cid=1">Soojin Kim</a></div></td>
                                <td class=" "><div id="fdPhone_1"><a href="/Customer/index/?step=modify&amp;cid=1">408-172-3827</a></div></td>
                            </tr>

                        </tbody>
                    </table>
4

3 に答える 3

0

技術的には、テーブルに問題はありません。それはあなたのCSSでなければなりません。デバッグに役立つ Firebug などのツールを使用してください。

于 2013-03-27T19:49:10.327 に答える
0

答えは非常に簡単です。あなたのテーブルは、それらを含むdivよりも大きくなっています。テーブルに幅を設定してみてください。編集：実際には、テーブルがdivのサイズに合わせてサイズ変更されると想定されており、現在のdivが他のdivから抜け出しているため、他のdivのdiv span5を削除します。

また、役に立たないdivが多すぎます。ケリー・ジョンソンが言ったように。td 内の単一の div はあまり役に立ちません。span6 内の span5 と同じです。

すべての要素をコンテナとして見る必要があります。Div は、スタイルを設定したり、ページの周りに要素を配置したりするために使用されるコンテナーです。基本的に、div は長方形です。長方形の中に長方形は必要ありません。テキストと td の側面の間にスペースが必要な場合は、スタイル パディングを使用します。

于 2013-03-27T20:46:29.440 に答える
0

うわー。「divitis」の典型的な例は、フィドルで html に div が多すぎることです。div 内にテーブルがあり、テーブル セル内に div があります。

それは機能しますが、代わりにIDをtdに入れてみませんか? いくつかの CMS に翻弄されていますか?

また、コードをスキャンするだけで、この ID: fdContactName_1 が 2 回表示されます。ID は 1 ページに 1 回だけ表示する必要があります。

最初にすべてのコードをコピーして、バリデーターに貼り付けることをお勧めします: validator.w3.org/

すべてのエラーを修正し、コンテンツをより適切に構成できるかどうかを確認してください。現在、フィドル コードから、82 個のエラー、45 個の警告があります。警告はそれほど重要ではありません。

table margin:0 0 30px 0; のようなものを使用しても。これらすべての ID が原因で問題が発生します...具体性は整形式になるための悪夢になるでしょう

于 2013-03-27T20:17:59.367 に答える