Невалидна ширина на колоната

Както е отбелязано от @AlexHadley, проблемът е причинен от множеството td редове във вашия thead, което би изисквало използването на colgroups за поддържане на оформлението.

Въпреки това, тъй като изглежда, че първоначалното tr в thead всъщност се използва за предоставяне на описание на таблицата, вероятно би било по-семантично да се използва маркер caption за присвояване на дефиниция на таблицата.

Като бележка за маркиране, вие също трябва да използвате th вместо td за редовете в заглавката на таблицата.

За повече информация относно това какво е налично в рамките на table маркирането, вижте този този WDG справочник.

дължи се на table-layout: fixed;. Проверете го, след като го премахнете от css.

Както каза Муртаза: поправено е. вашата таблица игнорира ширината, дадена на отделните td, и взема собствената си изчислена ширина според фиксирания стил

Teez е абсолютно прав, че проблемът е в table-layout:fixed.

Това, което прави този стил, е, че кара таблицата да вземе ширините на колоните си от първия срещан ред, след което започва да генерира съдържанието въз основа единствено на това. Така че във вашия пример първият ред е colspan=3, така че той просто дава на всички колони еднаква ширина. Опитайте да размените редовете във вашия първи пример, за да видите ефекта. Това също обяснява защо вашият втори пример работи.

Повече информация можете да видите тук: http://www.w3.org/TR/CSS2/tables.html#fixed-table-layout

В алгоритъма за оформление на фиксирана таблица ширината на всяка колона се определя, както следва:

1. Елемент на колона със стойност, различна от „auto“ за свойството „width“, задава ширината за тази колона.
2. В противен случай клетка в първия ред със стойност, различна от „auto“ за свойството „width“, определя ширината за тази колона. Ако клетката обхваща повече от една колона, ширината се разделя на колоните.
3. Всички останали колони разделят поравно оставащото хоризонтално пространство на таблицата (минус границите или разстоянието между клетките).

[моето удебеляване]

Като решение можете да добавите <colgroup> като първи запис в тага <table>:

<colgroup> 
    <col style="width:50px;" /> 
    <col style="width:50px;" /> 
    <col style="width:300px;" /> 
</colgroup> 

например. Както се вижда тук.

Това е така, защото colspan td първо задава ширината. Работи, ако декларирате ширините преди colspan:

<thead>
  <tr>
     <td style="width:50px;">FirstName</td>
     <td style="width:50px;">LastName</td>
     <td style="width:300px;">Address</td>
  </tr>
  <tr>
     <td colspan="3">text</td>
  </tr>
</thead>

Можете да използвате невидим ред за ширините:

<thead>
  <tr style="height:0px;">
     <td style="width:50px;"></td>
     <td style="width:50px;"></td>
     <td style="width:300px;"></td>
  </tr>
  <tr>
     <td colspan="3">text</td>
  </tr>
  <tr>
     <td>FirstName</td>
     <td>LastName</td>
     <td>Address</td>
  </tr>
</thead>