Highlighted

Managing table column widths via stylesheet

Explorer ,
Jun 19, 2020

Copy link to clipboard

Copied

I would like to be able to individually define the width of table columns using a stylesheet, however it seems that because of the way that Robohelp 2019 creates tables this is not possible without modifying the HTML each time. 

 

For example, if I create a three-column table, a <colgroup> is generated automatically in the HTML to force those columns to be equal widths. 

    <colgroup>
      <col style="width:33.33%" />
      <col style="width:33.33%" />
      <col style="width:33.33%" />
    </colgroup>

 

If I attempt to apply a column width in my stylesheet, nothing happens. Note that in my testing examples I've also added color in, but I don't really care about the color in my use case; I'm just doing that as a sanity check. 

table.test col:first-child {
  width: 10%;
  background-color: #ff0000;
}
table.test col:nth-child(3){
  width: 40%;
  background-color: #00ff00;
}

 

The background-color is applied, but the column width does not change. 

 

 

css_applied.png

 

If I remove the <colgroup> then I able to manage the column width via the stylesheet, but I'd prefer not to have to go into the HTML of every table and remove that definition.

 

Is possble to either:

1. Define the stylesheet such that it can effectively override the widths automatically defined in the <colgroup>

2. Configure the software such that a colgroup is NOT automatically defined when a table is created

 

Views

56

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Managing table column widths via stylesheet

Explorer ,
Jun 19, 2020

Copy link to clipboard

Copied

I would like to be able to individually define the width of table columns using a stylesheet, however it seems that because of the way that Robohelp 2019 creates tables this is not possible without modifying the HTML each time. 

 

For example, if I create a three-column table, a <colgroup> is generated automatically in the HTML to force those columns to be equal widths. 

    <colgroup>
      <col style="width:33.33%" />
      <col style="width:33.33%" />
      <col style="width:33.33%" />
    </colgroup>

 

If I attempt to apply a column width in my stylesheet, nothing happens. Note that in my testing examples I've also added color in, but I don't really care about the color in my use case; I'm just doing that as a sanity check. 

table.test col:first-child {
  width: 10%;
  background-color: #ff0000;
}
table.test col:nth-child(3){
  width: 40%;
  background-color: #00ff00;
}

 

The background-color is applied, but the column width does not change. 

 

 

css_applied.png

 

If I remove the <colgroup> then I able to manage the column width via the stylesheet, but I'd prefer not to have to go into the HTML of every table and remove that definition.

 

Is possble to either:

1. Define the stylesheet such that it can effectively override the widths automatically defined in the <colgroup>

2. Configure the software such that a colgroup is NOT automatically defined when a table is created

 

Views

57

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jun 19, 2020 0
Adobe Community Professional ,
Jun 20, 2020

Copy link to clipboard

Copied

1. Define the stylesheet such that it can effectively override the widths automatically defined in the <colgroup>

 

Inline styling overrides anything in the CSS. I think you can declare something as !Important but you then would have to define the column widths in the CSS and I don't think that's an easy task. Issues like how many columns and so on.

 

2. Configure the software such that a colgroup is NOT automatically defined when a table is created.

Pretty sure that's a no.

 

****************************************

 

What you could try is a topic with some tables configured how you want them. Don't include that topic in your TOC so that in 2019 New UI it will not get into the build, then copy/paste from that topic.

 

 

www.grainge.org for free RoboHelp & Authoring info. Use the blue Reply button at the top to help me help you.
The black Reply link nests replies and they sort out of order.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 20, 2020 0
Explorer ,
Jun 20, 2020

Copy link to clipboard

Copied

Peter - thanks as always for your input. 

 

My issue biggest issue is that I'm working 900+ existing pages from our old system which are inconsistently formatted and I'm trying to "touch" the content as little as possible, while still cleaning it up and improving the long term maintainability, make use of stylesheets as much as possible to isolate where the styling derives from.  I was able to get things working using the !important override, which I was hesitant to do, but as you say, it seems like the only way. 

 

And as you also indicated, it does require unique styles based on the number of columns.

 

Here's some sample CSS in case it helps the next person. 

 

/* Define column widths */  
table.col2_c1_20pct , table.col3_c1_20pct{
  --col1width: 20% ;
  --col2width: calc(var( --tablewidth) - var(--col1width) );  
}

table.col3_c1_20pct{
 
  --col2width: calc((var( --tablewidth) - var(--col1width)) / 2) ;  
  --col3width: var( --col2width); 

 }

 /* Apply column widths */ 
 table col:first-child {
  width: var(--col1width) !important
 }
 
 table col:nth-child(2) {
  width: var(--col2width)  !important
 }
 
 table.col3_c1_20pct col:nth-child(3) {
  width: var(--col3width)  !important
 }

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 20, 2020 0
Adobe Community Professional ,
Jun 21, 2020

Copy link to clipboard

Copied

Thanks for posting that. It could be very useful.

 

www.grainge.org for free RoboHelp & Authoring info. Use the blue Reply button at the top to help me help you.
The black Reply link nests replies and they sort out of order.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 21, 2020 0