html table td's and tr's disappearing

I'm going though something quite weird. I was working on a chat system with the rows and stuff based on tables, but the formatting kept messing up. I wondered why until I looked at the part of the source which was not working, which looked like this:

<table border="0"> 
<tbody> 

<tr class="chatline" style="background:white;border-style:none;border-top:1px solid grey;开发者_StackOverflow社区padding:0px;"> 
<td style="background:#A0D7FF;margin:0px;width:1%;"><span style="padding:2px;background:#A0D7FF;color:black;height:100%;border-right:1px solid grey;">kpsuperplane</span></td> 
<td style="color:black;background:white;"><span style="color:black;padding:2px;">test</span></td> 
</tr> 
<tr class="chatline" style="background:white;border-style:none;border-top:1px solid grey;padding:0px;"> 
<td style="background:#A0D7FF;margin:0px;width:1%;"><span style="padding:2px;background:#A0D7FF;color:black;height:100%;border-right:1px solid grey;">kpsuperplane</span></td> 
<td style="color:black;background:white;"><span style="color:black;padding:2px;">test</span></td> 
</tr> 
</tbody>
</table>

However, when I view it through dev tools in chrome, I get this:

 <table border="0"> 
    <tbody> 
    <span style="padding:2px;background:#A0D7FF;color:black;height:100%;border-right:1px solid grey;">kpsuperplane</span>
<span style="color:black;padding:2px;">test</span>
   <span style="padding:2px;background:#A0D7FF;color:black;height:100%;border-right:1px solid grey;">kpsuperplane</span>
<span style="color:black;padding:2px;">test</span>
    </tbody>
    </table>

Any idea why this is happening? The td's and tr's are automatically removed from the document when they are rendered. And this is not chrome specific. Live code in dreamweaver gives the same puzzling result. Pic below:

I tested this in jsfiddle and it doesn't seem to be a problem. I also tested it in my own environment (chrome) and it works fine. Try looking for an unclosed tag in code above the table.

Edit:

Paste the code into w3c validator http://validator.w3.org/check. I found 13 errors/warning in the html. Check out the errors and the specific line numbers.

I found that you have div tags within the table, but they are not wrapped by a tr. I'm sure you'll be able to find the rest within the validators output.

According to your jsfiddle: you have simple mistake in HTML structure, here is copy paste;

 </tr> 
</table> 
</div> 

<tr class="chatline" style="background:white;border-style:none;border-top:1px solid    grey;padding:0px;"> 

you close table and then you do not open it. ctrl + f and type /table. I suggest you just going carefully through it and make valid html ;)

Sorry it is not an answer, but it won't let me comment.

I tried same code in chrome using Dev Tools it is showing me tr and td's, so I am not what is happening in your case. I enclosed above code into html and body tags.