Table Not Respecting Style=Width Formatting

This forum is for all Flare issues related to styles, stylesheets and XML.
Post Reply
writer_sam
Propeller Head
Posts: 26
Joined: Thu Sep 14, 2017 6:38 am
Location: Dorset, UK

Table Not Respecting Style=Width Formatting

Post by writer_sam »

Hi there,

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]%;"
to set the column widths which typically works for the rare occassions I need to use this ... except in this instance, and I have no idea what it's doing.

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>
The "Icon" class just shrinks the image to 10px X 10px.

In my XML Editor, I see it looking exactly how I want it:
simple-table-xml-editor.png
However, when built it displays as (both Firefox and Chrome):
simple-table-output.png
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.
You do not have the required permissions to view the files attached to this post.
To err is human, but to really foul things up you need a computer.
ChoccieMuffin
Senior Propellus Maximus
Posts: 2630
Joined: Wed Apr 14, 2010 8:01 am
Location: Surrey, UK

Re: Table Not Respecting Style=Width Formatting

Post by ChoccieMuffin »

What is in your TABLE stylesheet for that table, in whatever medium you use for your online outputs? That might give you some further clues. (Though as you've done inline widths that should take precedence...)

Another thing you could do is leave one of the columns without a width setting and see if that helps.

Also, take a look at what's what when displaying it in the browser (right-click and Inspect Element or View Source, can't remember which) in case that gives you a clue.
Started as a newbie with Flare 6.1, now using Flare 2023.
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
Post Reply