таблицы перекрывают друг друга

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

Woah. Классический пример «divitis» waaaaay слишком много divs в html на скрипке. У вас есть таблица внутри div и div внутри ячеек таблицы.

Хотя это может сработать, почему бы просто не поместить идентификаторы на td? ? вы на милость какой-то CMS

Кроме того, я вижу это ID: fdContactName_1 дважды просто сканируя по коду ID должен появиться только один раз на странице

Я предлагаю сначала скопировав весь код, вставить его в на.. валидатор: validator.w3.org/

Исправить все ошибки и посмотреть, можете ли вы структурировать контент лучше. Прямо сейчас, из fi ddle code есть 82 ошибки, 45 предупреждений. Предупреждения не будут иметь большого значения.

Даже используя что-то вроде поля таблицы: 0 0 30px 0; попадает в беду из-за всех этих идентификаторов ... Специфика будет кошмаром, чтобы получить хорошо сформированный

Answer 3

Ответ довольно прост. Ваши таблицы больше, чем div, содержащий их. Попробуйте установить ширину таблицы. Изменить: На самом деле, удалите div span5 в другом div, так как ваша таблица должна изменить размер до размера вашего div, а div, в котором он сейчас находится, вырывается из вашего другого div.

Также у вас есть waaaayyy слишком много divs, которые бесполезны. Как сказал Келли Джонсон. один div внутри td не очень полезен. То же самое с span5 внутри span6.

Вы должны увидеть все элементы как контейнеры. Div - это контейнер, используемый для целей стилизации и размещения материала вокруг вашей страницы. В принципе, div является прямоугольником. Вам не нужен прямоугольник внутри прямоугольника. Если вам нужно пространство между текстом и стороной td, используйте отступы стиля.