Google Docs loses CSS styling when copying tables - inline styles work but classes don't

[Neo_Stars]

I’m having a weird issue with copying HTML tables to Google Docs. When I use CSS classes to style my table, the formatting gets lost during copy-paste. But when I use inline styles, everything works fine.

Here’s my CSS and HTML with classes:

table.data-grid {
   width: 100%;
   border-collapse: collapse;
}

table.data-grid th {
   border: 1px solid black;
   background-color: #DDD;
   font-weight: bold;
   padding: 3px;
}

<table class='data-grid'>
<tr>
<th>Memory</th>
<th>Available</th>
<th>Used</th>
<th>Reserved</th>
<th>Buffer</th>
<th>Cached</th>
</tr>
</table>

This shows up correctly in the browser but when I copy it to Google Docs, all the borders and background colors disappear.

However, if I put the same styles directly on each cell like this:

<table class='data-grid'>
<tr>
<th style='border: 1px solid black; background-color: #DDD; font-weight: bold; padding: 3px;'>Memory</th>
<th style='border: 1px solid black; background-color: #DDD; font-weight: bold; padding: 3px;'>Available</th>
<th style='border: 1px solid black; background-color: #DDD; font-weight: bold; padding: 3px;'>Used</th>
</tr>
</table>

Then Google Docs keeps all the styling when I paste it. Why does this happen? Is there a way to make class-based styles work too?

[ameliat]

Indeed, this issue arises because Google Docs does not recognize external CSS styles when you paste HTML content. It only retains inline styles embedded directly in the HTML. I encountered a similar situation while transferring content from a project site. A practical workaround is to use the browser’s developer tools to replicate the styles. Right-click the table, select ‘Inspect Element,’ and then copy as HTML with inline styles. This way, you effectively convert class-based styles to inline, allowing Google Docs to retain the formatting upon pasting.

[AdventurousHiker17]

yeah, super annoying but that’s just google docs being google docs. it completely strips css classes and only keeps inline styles. i just run my html through an online css inliner first - way easier than manually adding style attributes to everything.

[Pete_Magic]

Google Docs can’t read external CSS classes when you paste content. It retains only the styles that are directly applied as inline styles within the HTML. Your separate CSS classes are ignored since Google Docs does not recognize them. I’ve faced similar issues when trying to transfer formatted web content into Docs. To resolve this, I use a JavaScript function that converts class styles into inline styles before copying. This involves scripting to extract the computed styles from the elements. Although it requires some initial effort, it significantly streamlines the process for frequent copying. Alternatively, you may utilize Google Docs’ formatting tools post-pasting, although that somewhat undermines the purpose of using pre-styled content.