Question

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

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>

Answer 1

从技术上讲，你的桌子没什么问题。它一定是你的CSS。使用像Firebug这样的工具来帮助您调试它。

Answer 2

哇。 'divitis'的经典例子在小提琴的html中有太多的div。你在div中有一个表，在表格单元里面有div。

虽然这可行，但为什么不把id放在td上呢？你受某些CMS的支配吗？

另外，我看到这个ID：fdContactName_1两次只扫描代码。 ID应该每页只显示一次。

我建议先复制所有代码，然后将其粘贴到验证器上：validator.w3.org /

修复所有错误，看看是否可以更好地构建内容。现在，从小提琴代码中有82个错误，45个警告。警告无关紧要。

即使使用表格边距：0 0 30px 0;由于所有这些身份而陷入困境......特异性将成为一个形成良好形态的噩梦

Answer 3

答案很简单。你的表比包含它们的div大。尝试为表格设置宽度。编辑：实际上，删除你的其他div中的div span5，因为你的表格被调整为你的div的大小，而它现在的div正在突破你的另一个div。

此外，你有太多无用的divs waaaayyy。就像凯莉约翰逊说的那样。 td中的单个div并不是真的有用。与span6内的span5相同。

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

桌子相互重叠

3 个答案: