0

我的页面中有三个表格....所有三个表格都重叠....如何避免三个表格重叠....

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

Woah. Classic example of 'divitis" waaaaay too many divs in the html at fiddle. You have a table inside a div and div's inside of table cells.

While that can work, why not just put id's on the td instead? Are you at the mercy of some CMS?

Also, I see this ID: fdContactName_1 twice just scanning over the code. ID should only appear once per page.

I suggest first copying all code, pasting it in at the validator: validator.w3.org/

Fix all errors and see if you can structure the content better. Right now, from the fiddle code there are 82 Errors, 45 warning(s). The warnings won't matter as much.

Even using something like table margin:0 0 30px 0; gets into trouble because of all those id's...the specificity is going to be a nightmare to get well-formed

于 2013-03-27T20:17:59.367 回答
0

答案很简单。你的表比包含它们的 div 大。尝试为您的表格设置宽度。编辑：实际上，删除其他 div 中的 div span5，因为您的表格应该调整为您的 div 的大小，并且它现在所在的 div 正在脱离您的其他 div。

此外，您还有太多无用的 div。就像凯利约翰逊所说的那样。td 中的单个 div 并不是很有用。与 span6 中的 span5 相同。

您必须将所有元素视为容器。Div 是一个用于样式设置和在页面周围放置内容的容器。基本上， div 是一个矩形。您不需要矩形内的矩形。如果您需要文本和 td 边之间的空间，请使用样式填充。

于 2013-03-27T20:46:29.440 回答