Table Not Respecting Style=Width Formatting

This forum is for all Flare issues related to styles, stylesheets and XML.

Table Not Respecting Style=Width Formatting

Postby writer_sam on Fri Mar 20, 2020 8:55 am

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.
writer_sam
Propeller Head
 
Posts: 25
Joined: Thu Sep 14, 2017 6:38 am
Location: Dorset, UK

Re: Table Not Respecting Style=Width Formatting

Postby ChoccieMuffin on Fri Mar 20, 2020 9:38 am

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 2019r1 and 2020.
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
ChoccieMuffin
Senior Propellus Maximus
 
Posts: 2376
Joined: Wed Apr 14, 2010 8:01 am
Location: Surrey, UK


Return to Styles, Stylesheets and XML

Who is online

Users browsing this forum: No registered users and 7 guests