Table Column Widths auto-fill when I have already set them

aparkes · Post by **aparkes** » Wed Dec 11, 2019 9:05 am

I'm having issues with a table that appears as it should in the project but previews and builds completely change. I have a simple table, 5 columns set to the widths of 28%, 8%, 28%, 8% and 28% and only 1 row. To test what I am trying to achieve, only the 1st and 3rd column contain any data, in this case a snippet. I want my table to keep to the column widths even if they are empty.

However when I preview or build, the two columns containing a snippet appear to automatically fill up the available width on the PDF and the other columns are ignored. I believe my CSS and styles are all set-up correctly it's just something seems to disregard the styles when I build. I've included screenshots and code below. Have I missed something?

Project (How It should look)

From Scratch Test 01.png

preview

From Scratch Test 02.png

Topic Code:

Code: Select all

<?xml version="1.0" encoding="utf-8"?>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd">
    <head>
        <link href="../Resources/TableStyles/MWF Steps Text.css" rel="stylesheet" MadCap:stylesheetType="table" />
        <link href="../Resources/TableStyles/Table Test.css" rel="stylesheet" MadCap:stylesheetType="table" />
    </head>
    <body>
        <h1>From Scratch Test</h1>
        <p> </p>
        <table style="mc-table-style: url('../Resources/TableStyles/Table Test.css');border-left-style: solid;border-left-width: 1px;border-left-color: #000000;border-right-style: solid;border-right-width: 1px;border-right-color: #000000;border-top-style: solid;border-top-width: 1px;border-top-color: #000000;border-bottom-style: solid;border-bottom-width: 1px;border-bottom-color: #000000;margin-left: auto;margin-right: auto;" class="TableStyle-Table_Test" cellspacing="0">
            <col class="TableStyle-Table_Test-Column-Column1" />
            <col class="TableStyle-Table_Test-Column-Column2" />
            <col class="TableStyle-Table_Test-Column-Column1" />
            <col class="TableStyle-Table_Test-Column-Column2" />
            <col class="TableStyle-Table_Test-Column-Column1" />
            <tbody>
                <tr class="TableStyle-Table_Test-Body-Body1">
                    <td class="TableStyle-Table_Test-BodyB-Column1-">
                        <MadCap:snippetBlock src="../Resources/Snippets/testimage1.flsnp" />
                    </td>
                    <td class="TableStyle-Table_Test-BodyB-Column2-">
                        <p> </p>
                    </td>
                    <td class="TableStyle-Table_Test-BodyB-Column1-">
                        <MadCap:snippetBlock src="../Resources/Snippets/testimage1.flsnp" />
                    </td>
                    <td class="TableStyle-Table_Test-BodyB-Column2-">
                        <p> </p>
                    </td>
                    <td class="TableStyle-Table_Test-BodyA-Column1-">
                        <p> </p>
                    </td>
                </tr>
            </tbody>
        </table>
        <p> </p>
        <p> </p>
        <p> </p>
        <div class="MobileWorkforceTest">
            <div>
                <MadCap:snippetBlock src="../Resources/Snippets/testimage1.flsnp" MadCap:conditions="Default.ScreenOnly" />
            </div>
            <div>
                <p MadCap:conditions="Default.ScreenOnly">…</p>
            </div>
            <div>
                <MadCap:snippetBlock src="../Resources/Snippets/testimage1.flsnp" MadCap:conditions="Default.ScreenOnly" />
            </div>
            <div>
                <p MadCap:conditions="Default.ScreenOnly"> </p>
            </div>
            <div>
                <MadCap:snippetBlock src="../Resources/Snippets/testimage1.flsnp" MadCap:conditions="Default.ScreenOnly" />
            </div>
        </div>
    </body>
</html>

Table CSS Code:

Code: Select all

/* MadCap Table Style: */

/*<meta Version="9" />*/

mcTableStyle
{
	name: Table Test;
	border-collapse: collapse;
	border-left-style: solid;
	border-left-width: 1px;
	border-left-color: #000000;
	border-right-style: solid;
	border-right-width: 1px;
	border-right-color: #000000;
	border-top-style: solid;
	border-top-width: 1px;
	border-top-color: #000000;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #000000;
	max-id: 7;
}

mcTableColumnStyle
{
	span: 1;
	separator-style: solid;
	separator-width: 1px;
	separator-color: #000000;
	name: Column1;
	id: 0;
	size: 28%;
}

mcTableColumnStyle
{
	span: 1;
	id: 4;
	name: Column2;
	size: 8%;
	separator-style: solid;
	separator-width: 1px;
}


/* Cell Styles: */
 
.TableStyle-Table_Test
{
	border-collapse: collapse;
	border-left-style: solid;
	border-left-color: #000000;
	border-left-width: 1px;
	border-right-style: solid;
	border-right-color: #000000;
	border-right-width: 1px;
	border-top-style: solid;
	border-top-color: #000000;
	border-top-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #000000;
	border-bottom-width: 1px;
	border-spacing: 0px 0px;
}

.TableStyle-Table_Test-Column-Column1
{
	width: 28%;
}

.TableStyle-Table_Test-Column-Column2
{
	width: 8%;
}

.TableStyle-Table_Test-HeadI-Column1-
{
	
}

.TableStyle-Table_Test-HeadI-Column1- p
{
	
}

.TableStyle-Table_Test-HeadE-Column1-
{
	border-right-width: 1px;
	border-right-color: #000000;
	border-right-style: solid;
}

.TableStyle-Table_Test-HeadE-Column1- p
{
	
}

.TableStyle-Table_Test-HeadF-Column1-
{
	
}

.TableStyle-Table_Test-HeadF-Column1- p
{
	
}

.TableStyle-Table_Test-HeadH-Column1-
{
	border-right-width: 1px;
	border-right-color: #000000;
	border-right-style: solid;
}

.TableStyle-Table_Test-HeadH-Column1- p
{
	
}

.TableStyle-Table_Test-HeadD-Column1-
{
	
}

.TableStyle-Table_Test-HeadD-Column1- p
{
	
}

.TableStyle-Table_Test-HeadC-Column1-
{
	
}

.TableStyle-Table_Test-HeadC-Column1- p
{
	
}

.TableStyle-Table_Test-HeadB-Column1-
{
	border-right-width: 1px;
	border-right-color: #000000;
	border-right-style: solid;
}

.TableStyle-Table_Test-HeadB-Column1- p
{
	
}

.TableStyle-Table_Test-HeadA-Column1-
{
	
}

.TableStyle-Table_Test-HeadA-Column1- p
{
	
}

.TableStyle-Table_Test-HeadG-Column1-
{
	
}

.TableStyle-Table_Test-HeadG-Column1- p
{
	
}

.TableStyle-Table_Test-HeadI-Column2-
{
	
}

.TableStyle-Table_Test-HeadI-Column2- p
{
	
}

.TableStyle-Table_Test-HeadE-Column2-
{
	border-right-width: 1px;
	border-right-style: solid;
}

.TableStyle-Table_Test-HeadE-Column2- p
{
	
}

.TableStyle-Table_Test-HeadF-Column2-
{
	
}

.TableStyle-Table_Test-HeadF-Column2- p
{
	
}

.TableStyle-Table_Test-HeadH-Column2-
{
	border-right-width: 1px;
	border-right-style: solid;
}

.TableStyle-Table_Test-HeadH-Column2- p
{
	
}

.TableStyle-Table_Test-HeadD-Column2-
{
	
}

.TableStyle-Table_Test-HeadD-Column2- p
{
	
}

.TableStyle-Table_Test-HeadC-Column2-
{
	
}

.TableStyle-Table_Test-HeadC-Column2- p
{
	
}

.TableStyle-Table_Test-HeadB-Column2-
{
	border-right-width: 1px;
	border-right-style: solid;
}

.TableStyle-Table_Test-HeadB-Column2- p
{
	
}

.TableStyle-Table_Test-HeadA-Column2-
{
	
}

.TableStyle-Table_Test-HeadA-Column2- p
{
	
}

.TableStyle-Table_Test-HeadG-Column2-
{
	
}

.TableStyle-Table_Test-HeadG-Column2- p
{
	
}

.TableStyle-Table_Test-FootI-Column1-
{
	
}

.TableStyle-Table_Test-FootI-Column1- p
{
	
}

.TableStyle-Table_Test-FootE-Column1-
{
	border-right-width: 1px;
	border-right-color: #000000;
	border-right-style: solid;
}

.TableStyle-Table_Test-FootE-Column1- p
{
	
}

.TableStyle-Table_Test-FootF-Column1-
{
	
}

.TableStyle-Table_Test-FootF-Column1- p
{
	
}

.TableStyle-Table_Test-FootH-Column1-
{
	border-right-width: 1px;
	border-right-color: #000000;
	border-right-style: solid;
}

.TableStyle-Table_Test-FootH-Column1- p
{
	
}

.TableStyle-Table_Test-FootD-Column1-
{
	
}

.TableStyle-Table_Test-FootD-Column1- p
{
	
}

.TableStyle-Table_Test-FootC-Column1-
{
	
}

.TableStyle-Table_Test-FootC-Column1- p
{
	
}

.TableStyle-Table_Test-FootB-Column1-
{
	border-right-width: 1px;
	border-right-color: #000000;
	border-right-style: solid;
}

.TableStyle-Table_Test-FootB-Column1- p
{
	
}

.TableStyle-Table_Test-FootA-Column1-
{
	
}

.TableStyle-Table_Test-FootA-Column1- p
{
	
}

.TableStyle-Table_Test-FootG-Column1-
{
	
}

.TableStyle-Table_Test-FootG-Column1- p
{
	
}

.TableStyle-Table_Test-FootI-Column2-
{
	
}

.TableStyle-Table_Test-FootI-Column2- p
{
	
}

.TableStyle-Table_Test-FootE-Column2-
{
	border-right-width: 1px;
	border-right-style: solid;
}

.TableStyle-Table_Test-FootE-Column2- p
{
	
}

.TableStyle-Table_Test-FootF-Column2-
{
	
}

.TableStyle-Table_Test-FootF-Column2- p
{
	
}

.TableStyle-Table_Test-FootH-Column2-
{
	border-right-width: 1px;
	border-right-style: solid;
}

.TableStyle-Table_Test-FootH-Column2- p
{
	
}

.TableStyle-Table_Test-FootD-Column2-
{
	
}

.TableStyle-Table_Test-FootD-Column2- p
{
	
}

.TableStyle-Table_Test-FootC-Column2-
{
	
}

.TableStyle-Table_Test-FootC-Column2- p
{
	
}

.TableStyle-Table_Test-FootB-Column2-
{
	border-right-width: 1px;
	border-right-style: solid;
}

.TableStyle-Table_Test-FootB-Column2- p
{
	
}

.TableStyle-Table_Test-FootA-Column2-
{
	
}

.TableStyle-Table_Test-FootA-Column2- p
{
	
}

.TableStyle-Table_Test-FootG-Column2-
{
	
}

.TableStyle-Table_Test-FootG-Column2- p
{
	
}

.TableStyle-Table_Test-BodyI-Column1-
{
	
}

.TableStyle-Table_Test-BodyI-Column1- p
{
	
}

.TableStyle-Table_Test-BodyE-Column1-
{
	border-right-width: 1px;
	border-right-color: #000000;
	border-right-style: solid;
}

.TableStyle-Table_Test-BodyE-Column1- p
{
	
}

.TableStyle-Table_Test-BodyF-Column1-
{
	
}

.TableStyle-Table_Test-BodyF-Column1- p
{
	
}

.TableStyle-Table_Test-BodyH-Column1-
{
	border-right-width: 1px;
	border-right-color: #000000;
	border-right-style: solid;
}

.TableStyle-Table_Test-BodyH-Column1- p
{
	
}

.TableStyle-Table_Test-BodyD-Column1-
{
	
}

.TableStyle-Table_Test-BodyD-Column1- p
{
	
}

.TableStyle-Table_Test-BodyC-Column1-
{
	
}

.TableStyle-Table_Test-BodyC-Column1- p
{
	
}

.TableStyle-Table_Test-BodyB-Column1-
{
	border-right-width: 1px;
	border-right-color: #000000;
	border-right-style: solid;
}

.TableStyle-Table_Test-BodyB-Column1- p
{
	
}

.TableStyle-Table_Test-BodyA-Column1-
{
	
}

.TableStyle-Table_Test-BodyA-Column1- p
{
	
}

.TableStyle-Table_Test-BodyG-Column1-
{
	
}

.TableStyle-Table_Test-BodyG-Column1- p
{
	
}

.TableStyle-Table_Test-BodyI-Column2-
{
	
}

.TableStyle-Table_Test-BodyI-Column2- p
{
	
}

.TableStyle-Table_Test-BodyE-Column2-
{
	border-right-width: 1px;
	border-right-style: solid;
}

.TableStyle-Table_Test-BodyE-Column2- p
{
	
}

.TableStyle-Table_Test-BodyF-Column2-
{
	
}

.TableStyle-Table_Test-BodyF-Column2- p
{
	
}

.TableStyle-Table_Test-BodyH-Column2-
{
	border-right-width: 1px;
	border-right-style: solid;
}

.TableStyle-Table_Test-BodyH-Column2- p
{
	
}

.TableStyle-Table_Test-BodyD-Column2-
{
	
}

.TableStyle-Table_Test-BodyD-Column2- p
{
	
}

.TableStyle-Table_Test-BodyC-Column2-
{
	
}

.TableStyle-Table_Test-BodyC-Column2- p
{
	
}

.TableStyle-Table_Test-BodyB-Column2-
{
	border-right-width: 1px;
	border-right-style: solid;
}

.TableStyle-Table_Test-BodyB-Column2- p
{
	
}

.TableStyle-Table_Test-BodyA-Column2-
{
	
}

.TableStyle-Table_Test-BodyA-Column2- p
{
	
}

.TableStyle-Table_Test-BodyG-Column2-
{
	
}

.TableStyle-Table_Test-BodyG-Column2- p
{
	
}

ChoccieMuffin · Post by **ChoccieMuffin** » Fri Dec 13, 2019 3:16 am

I have found at times that the preview isn't properly WYSIWYG, more like WYSINQWYG (What You See Is Not Quite What You Get). So have you done a build and looked at the actual output?

Post by **Nita Beck** » Sat Dec 14, 2019 11:49 am

I once heard Mike Hamilton of MadCap (I think it was at MadWorld a few years back) describe the XML Editor as WYSIOPO (What You See Is One Possible Outcome). There are so many dependencies, particularly the stylesheet and master page(s) that are associated with a target, but also with how browsers display things by default. You might get a good result in one browser but not a good result in another. (Plus, the XML Editor will lay things out per whatever is set as the primary target.)

Instead of using a table for layout, as you appear to be doing, have you considering using a responsive layout? I’m not sure that’ll fit your bill, but wanted to bring it to your attention. https://help.madcapsoftware.com/flare20 ... ystems.htm

aparkes · Post by **aparkes** » Mon Dec 16, 2019 4:41 am

ChoccieMuffin wrote:I have found at times that the preview isn't properly WYSIWYG, more like WYSINQWYG (What You See Is Not Quite What You Get). So have you done a build and looked at the actual output?

Yes I have, I have found that removing te snippet and putting data in directly fixes the issue, unfortunately it undermines the purpose of what I'm trying to achieve. I'm discovering WYSINQWYG is a common thing.

aparkes · Post by **aparkes** » Mon Dec 16, 2019 4:47 am

Nita Beck wrote:I once heard Mike Hamilton of MadCap (I think it was at MadWorld a few years back) describe the XML Editor as WYSIOPO (What You See Is One Possible Outcome). There are so many dependencies, particularly the stylesheet and master page(s) that are associated with a target, but also with how browsers display things by default. You might get a good result in one browser but not a good result in another. (Plus, the XML Editor will lay things out per whatever is set as the primary target.)

Instead of using a table for layout, as you appear to be doing, have you considering using a responsive layout? I’m not sure that’ll fit your bill, but wanted to bring it to your attention. https://help.madcapsoftware.com/flare20 ... ystems.htm

Yes I initially tried using a responsive layout, however that led to a different issue which is why I'm trying tables. The issue with responsive layouts I also posted to the forums. viewtopic.php?f=10&t=32168

I have discovered my tables seem to work when I put data in directly instead of using a snippet, but the snippets are what I need, so still looking into it.

ChoccieMuffin · Post by **ChoccieMuffin** » Mon Dec 16, 2019 8:54 am

Lightbulb moment.

How have you added your snippets, as SnippetBlock or SnippetText? Look in the Text Editor. They definitely behave differently, but I don't have Flare open in front of me to describe the difference properly.

MadCap Software Forums

Table Column Widths auto-fill when I have already set them

Table Column Widths auto-fill when I have already set them

Re: Table Column Widths auto-fill when I have already set th

Re: Table Column Widths auto-fill when I have already set th

Re: Table Column Widths auto-fill when I have already set th

Re: Table Column Widths auto-fill when I have already set th

Re: Table Column Widths auto-fill when I have already set th