I have a table CSS which is very simple - no headers, footers, borders, set widths, or any such formattting. I use it when I want to create a horizontal listing of sorts. I use
Code: Select all
style="width: [i]n[/i]%;"
This is my simplified HTML:
Code: Select all
<table style="mc-table-style: url('../Resources/TableStyles/Simple.css');width: 100%;" class="TableStyle-Simple" cellspacing="0">
<col class="TableStyle-Simple-Column-Column1" style="width: 14.3%;" />
<col class="TableStyle-Simple-Column-Column1" style="width: 14.3%;" />
<col class="TableStyle-Simple-Column-Column1" style="width: 14.3%;" />
<col class="TableStyle-Simple-Column-Column1" style="width: 14.3%;" />
<col class="TableStyle-Simple-Column-Column1" style="width: 14.3%;" />
<col class="TableStyle-Simple-Column-Column1" style="width: 14.3%;" />
<col class="TableStyle-Simple-Column-Column1" style="width: 14.3%;" />
<tbody>
<tr class="TableStyle-Simple-Body-Row1">
<td class="TableStyle-Simple-BodyE-Column1-Row1">
<img src="../Resources/Images/toolbar-open.svg" title="Open" alt="Open" class="Icon" />
</td>
<td class="TableStyle-Simple-BodyE-Column1-Row1">
<img src="../Resources/Images/toolbar-rename.svg" title="Rename button" alt="Rename button" class="Icon" />
</td>
<td class="TableStyle-Simple-BodyE-Column1-Row1">
<img src="../Resources/Images/BPA/main/toolbar-cut.svg" title="Cut" alt="Cut" class="Icon" />
</td>
<td class="TableStyle-Simple-BodyE-Column1-Row1">
<img src="../Resources/Images/toolbar-copy.svg" title="Copy" alt="Copy" class="Icon" />
</td>
<td class="TableStyle-Simple-BodyE-Column1-Row1">
<img src="../Resources/Images/toolbar-paste.svg" title="Paste" alt="Paste" class="Icon" />
</td>
<td class="TableStyle-Simple-BodyE-Column1-Row1">
<img src="../Resources/Images/toolbar-delete.svg" title="Delete" alt="Delete" class="Icon" />
</td>
<td class="TableStyle-Simple-BodyD-Column1-Row1">
<img src="../Resources/Images/toolbar-create-shortcut.svg" title="Add Shortcut" alt="Add Shortcut" class="Icon" />
</td>
</tr>
<tr class="TableStyle-Simple-Body-Row1">
<td class="TableStyle-Simple-BodyB-Column1-Row1"><small>Open</small>
</td>
<td class="TableStyle-Simple-BodyB-Column1-Row1"><small>Rename</small>
</td>
<td class="TableStyle-Simple-BodyB-Column1-Row1"><small>Cut</small>
</td>
<td class="TableStyle-Simple-BodyB-Column1-Row1"><small>Copy</small>
</td>
<td class="TableStyle-Simple-BodyB-Column1-Row1"><small>Paste</small>
</td>
<td class="TableStyle-Simple-BodyB-Column1-Row1"><small>Delete</small>
</td>
<td class="TableStyle-Simple-BodyA-Column1-Row1">
<p><small>Add</small>
</p>
<p><small>Shortcut</small>
</p>
</td>
</tr>
</tbody>
</table>
In my XML Editor, I see it looking exactly how I want it: However, when built it displays as (both Firefox and Chrome): This particular topic is also outputted as a PDF ... where it renders perfectly!
This is the only table I have where this happens. All others accept the inline style formatting, even where I've specified it in the CSS.
Any ideas? I'm running 2019 r2.
Thanks in advance.