表相互重叠

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”示例waaaaay在html中有太多的div，在表格单元格里面有div和div的表格

虽然这可以工作，但为什么不把id放在td上？ ？你在一些CMS的摆布

而且，我看到这个ID：fdContactName_1两次即可扫描过的代码ID应该只出现每页一次

我建议首先复制所有的代码，在粘贴。验证器：validator.w3.org/

修复所有错误，看看你是否可以更好地构造内容。现在，从fi ddle代码有82个错误，45个警告。警告并不重要。

即使使用类似表格边距的东西：0 0 30px 0;因为所有这些身份证都会陷入麻烦......特异性将会成为一场噩梦

Answer 3

答案很简单。你的表格比包含它们的div大。尝试设置一个宽度到你的桌子。编辑：其实，删除您的其他div div span5，因为您的表是假设调整到您的div的大小和它现在正在其中div的大小突破你的其他股利。

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

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