Различия в таблицах Firefox и Chrome - таблица-строка

Question

Мне пришлось сделать сайт с главным образом таблицами (очень старый веб-сайт) немного отзывчивым. Я внесла все свои изменения и всегда тестировал их с помощью Firefox Dev Edition и функциональности Responsive Design View.

Теперь это выглядит хорошо в Firefox Dev Edition, (и стандартный Firefox), но в Chrome и другие браузеры, это показывает немного другой.

Вот как это выглядит в Firefox Dev Edition,:

Вот как это выглядит в Chrome:

Как вы можете видеть мою таблицу немного отличается. Это HTML из части моей таблицы (таблица заголовка и первой строки):

<table class="FontNormal"> 
    <tbody> 
     <tr> 
      <td colspan="4" align="right"> 
       <a href="newtopic.asp">New topic</a> 
      </td> 
     </tr> 
     <tr> 
      <td>&nbsp;</td> 
     </tr> 
     <tr class="TableHeader" valign="top"> 
      <td width="500">Topic</td> 
      <td width="150"> 
       <a href="default.asp?DS=A"><font color="black">Last Post</font></a>&nbsp;<img src="../images/sortdesc.gif"> 
      </td> 
      <td>Product</td> 
      <td>Group</td> 
     </tr> 
     <tr> 
      <td style="max-width: 462px;"> 
       <a href="showtopic.asp?ID=3209">Baxter - Black Piping</a> (0) 
      </td> 
      <td style="max-width: 462px;"> 
       14/02/2015 00:29:02 
      </td> 
      <td style="max-width: 462px;"> 
       Pharma 
      </td> 
      <td style="max-width: 462px;"> 
       BDT Industry 
      </td> 
      <td style="max-width: 462px;"> 
       <a href="deletetopic.asp?ParentID=-1&amp;ID=3209">Delete</a> 
      </td> 
     </tr> 
    </tbody> 
</table> 

Я не имею reset.css. Есть ли способ, который я могу исправить это быстро, без дополнительных дополнительных программ?

Answer 1

У вас есть разное количество столбцов в каждой строке. Убедитесь, что количество столбцов согласовано, а браузеры -. Я думаю, что ваше видение - это различная обработка между Chrome и Firefox, когда количество столбцов в каждой строке не совпадает.

<table class="FontNormal"> 
<tbody> 
    <tr> 
     <td colspan="5" align="right"> 
      <a href="newtopic.asp">New topic</a> 
     </td> 
    </tr> 
    <tr> 
     <td colspan="5">&nbsp;</td> 
    </tr> 
    <tr class="TableHeader" valign="top"> 
     <td width="500">Topic</td> 
     <td width="150" colspan="2"> 
      <a href="default.asp?DS=A"><font color="black">Last Post</font></a>&nbsp;<img src="../images/sortdesc.gif"> 
     </td> 
     <td>Product</td> 
     <td>Group</td> 
    </tr> 
    <tr> 
     <td style="max-width: 462px;"> 
      <a href="showtopic.asp?ID=3209">Baxter - Black Piping</a> (0) 
     </td> 
     <td style="max-width: 462px;"> 
      14/02/2015 00:29:02 
     </td> 
     <td style="max-width: 462px;"> 
      Pharma 
     </td> 
     <td style="max-width: 462px;"> 
      BDT Industry 
     </td> 
     <td style="max-width: 462px;"> 
      <a href="deletetopic.asp?ParentID=-1&amp;ID=3209">Delete</a> 
     </td> 
    </tr> 
</tbody> 

атрибут Объединение столбцов делает одну ячейку диапазона X столбцов так, если используется как указано выше, они будут всегда равны 5.