使用特定的 CSS (clipboard.js) 将表格复制并粘贴到 MS Word

Question

I am struggling with the following: I am trying to copy a simple HTML table to MS Word (A4 page size) by using clipboard.js. This works generally fine.

The table width ist set to 100% in CSS, but in MS Word it extends outside the page. Is there any way to define a CSS rule that applies 100% width in the browser and fits in Word (15,99 cm)?

So what I would like to achieve:
CSS in Browser: width: 100%;
CSS for copying to WORD: width: 15,99cm;

I tried using @media queries (to apply the CSS only in the browser), but had no luck. Any other ideas? Preferably in pure CSS.

Thanks :-)

 new ClipboardJS('.btn');

 .resultsTable { width: 100%; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script> <!-- Target --> <table id="foo" class="resultsTable"> <tbody> <tr> <td style="background-color: #eeeeee; font-weight: bold; width: 100%;" colspan="4"> <p><span style="font-size: 18px; font-weight: bold;">"Unentschieden&rdquo;-Antworten</span></p> </td> </tr> <tr> <td style="font-weight: bold; width: 50%;" width="50%"> <p><strong>Skala</strong></p> </td> <td style="font-weight: bold; width: 10%;" width="10%"> <p><strong>RW</strong></p> </td> <td style="font-weight: bold; width: 10%;" width="10%"> <p><strong>PR</strong></p> </td> <td style="font-weight: bold; width: 30%;" width="30%"> <p><strong>Text</strong></p> </td> </tr> <tr> <td width="50%"> <p>Schule</p> </td> <td width="10%"> <p>18</p> </td> <td width="10%"> <p>90-100</p> </td> <td width="30%"> <p>extrem &uuml;ber &Oslash;</p> </td> </tr> <tr> <td width="50%"> <p>Freizeit</p> </td> <td width="10%"> <p>18&nbsp;</p> </td> <td width="10%">90-100</td> <td width="30%"> <p>extrem &uuml;ber &Oslash;</p> </td> </tr> <tr> <td width="50%"> <p>Familie</p> </td> <td width="10%"> <p>18</p> </td> <td width="10%"> <p>90-100</p> </td> <td width="30%"> <p>extrem &uuml;ber &Oslash;</p> </td> </tr> <tr> <td width="50%"> <p>Gesamt</p> </td> <td width="10%"> <p>54</p> </td> <td width="10%"> <p>90-100</p> </td> <td width="30%"> <p>extrem &uuml;ber &Oslash;</p> </td> </tr> </tbody> </table> <!-- Trigger --> <button class="btn" data-clipboard-target="#foo"> COPY </button>

Answer 1

I was able to solve the issue by simply defining width as an html attribute for the table and not as a css style:

<table width="100%">

See https://jsfiddle.net/8za2sv6r/