使用特定的CSSclipboard.js复制表格并将其粘贴到MS Word

问题描述

我在以下方面苦苦挣扎：我正在尝试使用剪贴板.js将简单的HTML表复制到MS Word（A4页面大小）。总体来说还可以。

在CSS中，表格宽度ist设置为100％，但是在MS Word中，表格宽度ist扩展到了页面之外。有什么方法可以定义在浏览器中应用100％宽度并适合Word（15,99厘米）的CSS规则？

所以我想实现：
浏览器中的CSS：宽度：100％；
用于复制到WORD的CSS：宽度：15,99cm；

我尝试使用@media查询（仅在浏览器中应用CSS），但是没有运气。还有其他想法吗？最好在纯CSS中使用。

谢谢：-）

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>

解决方法

我能够通过简单地将width定义为表的html属性而不是css样式来解决此问题：

<table width="100%">

请参见https://jsfiddle.net/8za2sv6r/