javascript: отображается скрытая текстовая ширина

Question

Я пытаюсь показать скрытый контент в теле с некоторым javascript.

Две проблемы.

Во-первых, я не могу заставить работать jsfiddle.

Сценарий работает на моем сервере ... но он не будет работать с jsfiddle. Я должен делать что-то глупое, но не могу понять.

После решения, что реальная проблема заключается в том, когда она показывает содержимое, она не отображает ее в той же ширине, т.е. 100%, а просто в длину текста. Поблагодарили бы за любые предложения о том, что здесь не так.

http://jsfiddle.net/eSPu7/3/

же код, как и в скрипкой:

HTML

<table> 
    <tbody> 
     <tr style="background-color:blue;width:100%;height:30px;"> 
      <td>This is always here no matter what</td> 
     </tr> 
     <tr style="background-color:blue;width:100%;height:30px;"> 
      <td> 
       <a href="javascript:void();" onclick="showMore();">Show More</a> 
      </td> 
     </tr> 
    </tbody> 
    <tbody id="more" style="display:none;"> 
     <tr style="background-color:blue;width:100%;height:30px;"> 
      <td>This is hidden</td> 
     </tr> 
    </tbody> 
</table> 

ЯШ:

function showMore() { 
    alert("hi"); 
    document.getElementById("more").style.display="block"; 
} 

UPDATE:

Я обновил I так что скрипка теперь работает и лучше иллюстрирует проблему с синим фоном. Отображаемый скрытый текст не такой же, как другие строки в таблице.

Answer 1

Если вы на самом деле не нужны 2 tbody секции, посмотрите на эту fiddle