1

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&#223;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

isherwood
  • 58,414
  • 16
  • 114
  • 157
fjung
  • 141
  • 3
  • 14
  • Why use HTML at all? Word has a built-in table building feature. – APAD1 Aug 17 '15 at 19:14
  • Looking at a table like that in a browser, then copying from the browser and pasting into word generally works fairly well. Otherwise, despite some capabilities, word is neither a browser nor an HTML authoring tool. Don't expect it to support or conform to all web standards. – Stephen P Aug 17 '15 at 19:35
  • @fjung - I went to your fiddle, did a select and copy from my (Chrome) browser, pasted into Word, and got the table _with_ format and color, as seen in [this image](http://imgur.com/MypU22i). Copy/paste may not be a solution if you need to do this programmatically, but it _does_ work if all you need is this table in a word doc. – Stephen P Aug 17 '15 at 19:51
  • You are right. But the border for the inner table isn't show. But i can test different variants – fjung Aug 17 '15 at 19:59

2 Answers2

2

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>
Bmd
  • 1,308
  • 8
  • 15
  • I will test it. But it isn't easy to maintain – fjung Aug 17 '15 at 19:28
  • I completely agree. Often it's possible to deliver a PDF or some other format instead. I'm not sure what your specific project is, but were it me I would propose any other format I could get away with. – Bmd Aug 17 '15 at 21:01
  • If inline styles solves your problem and you have to deliver in Word in the way that you are, I would recommend writing a simple script in javascript to find all of the instances of a given class and add the attributes in-line. If you do that, you should be able to just copy and paste the inline styles by viewing the source when you view the page in your browser. – Bmd Aug 17 '15 at 21:06
  • Thank you, that was the right hint. You right, another format like pdf would the better way but unfortunately the customer need a output from html to word / docx. So i have to inline all the classes. http://jsfiddle.net/ndxp5h12/9/ – fjung Aug 18 '15 at 08:06
0

This maybe can help:

  1. go to "insert" tab, click "object" button (it's on the right)
  2. choose "OpenDocument Text" which will open a new embedded word document
  3. copy and paste your code from Visual Studio / Eclipse inside this embedded word page
  4. 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.

Community
  • 1
  • 1
Tomas Ramirez Sarduy
  • 17,294
  • 8
  • 69
  • 85
  • Thanks but your way doesn't work too. And it's for me no common way because i have written a small tool what uses the com-bridge to access the word-file. It's the same as when i open the html document directly. – fjung Aug 17 '15 at 19:01
  • @fjung Did you try with css inline? just to test if it is an specific MS Word bug – Tomas Ramirez Sarduy Aug 17 '15 at 19:07