CSS isn't shown when HTML file is opened in Word - html

Question

i have a problem by open an html table to word.
I have a complex designed table, with table into tables-cells and so on. And now I need this table with the cell background-colors and the given borders in MS-Word.
<table class="tablebox">
<tr class="head">
<td class="cell10">Icon</td>
<td class="cell10">Status</td>
<td class="cell50">
<table class="group">
<tr class="colGroup">
<td>
<table class="box yellow">
<tr class="color">
<td class="leftbox"></td>
<td class="rightbox">6</td>
</tr>
</table>
</td>
<td>
<table class="box red">
<tr class="color">
<td class="leftbox"></td>
<td class="rightbox">12</td>
</tr>
</table>
</td>
<td>
<table class="box green">
<tr class="color">
<td class="leftbox"></td>
<td class="rightbox">7</td>
</tr>
</table>
</td>
<td>
<table class="box blue">
<tr class="color blue">
<td class="leftbox"></td>
<td class="rightbox">7</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="cell30">Maßnahmen</td>
</tr>
<tr class="sub">
<td colspan="4">
<table>
<tr class="colGroup">
<td>
<table class="box yellow">
<tr class="color yellow">
<td class="leftbox"></td>
<td class="rightbox">6</td>
</tr>
</table>
</td>
<td>
<table class="box red">
<tr class="color red">
<td class="leftbox"></td>
<td class="rightbox">12</td>
</tr>
</table>
</td>
<td>
<table class="box green">
<tr class="color green">
<td class="leftbox"></td>
<td class="rightbox">7</td>
</tr>
</table>
</td>
<td>
<table class="box blue">
<tr class="color blue">
<td class="leftbox"></td>
<td class="rightbox">7</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
http://jsfiddle.net/ndxp5h12/8/
But when i open the document with word my css-style is gone. The most of my cells an tables don't have a border, and the background color is gone too?
When i remove the element styling (table, th etc.) then the border are ok, but the color's doesn't show in Word.
Where is the problem? How can I fix my stylesheet or how can i structure my table? Is there a common way?
Which element or class override another in Word? Or what should I not do that word read the CSS correct?
Thank you
Felix

Answer 1

You may have to add all of your styles within style attributes on your individual tables and cells.
For example:
<table style="background-color:green">
<tr>
<td style="*leftbox styles*"></td>
<td style="*rightbox styles*">7</td>
</tr>
</table>

Answer 2

This maybe can help:
go to "insert" tab, click "object" button (it's on the right)
choose "OpenDocument Text" which will open a new embedded word document
copy and paste your code from Visual Studio / Eclipse inside this embedded word page
save and close
How do you display code snippets in MS Word preserving format and syntax highlighting?
Unfortunately Word has issues with many different HTML/CSS tags, so I'm afraid it's a case of trial and error. When it comes to dt and dd you could replicate the formatting you want by using CSS classes and then applying them to suitable HTML alternatives.