nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

How do I set the width of columns in my tables?

Timothee Timoth

We recently switched to Confluence 4.0 and I lost my wiki markup editor

I am trying to change the width proportions of the columns in my table. Apparently I should be typing some {table-plus } type of macros, but I can't find a clear piece of documentation for it.

Accepted answers

Andrew Frayling

Starting again If you have admin rights you could enable the {html} macro in Confluence Admin -> Plugins -> Confluence HTML Macros and then enter something along the lines of:

{html}
&lt;table border="1" width="100%"&gt;
&lt;tr&gt;
&lt;td width="33%"&gt;One&lt;/td&gt;
&lt;td width="33%"&gt;Two&lt;/td&gt;
&lt;td width="33%"&gt;Three&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
{html}

in the editor.

Alternatively, the "Table Plugin" plugin that provides the {table-plus} macro is now 4.x compatible so you could install that via the Universal Plugin manager under Confluence Admin or download from https://plugins.atlassian.com/plugin/details/197?versionId=43351 If you use the {table-plus} macro you should be able to use:

{table-plus:border=1|width=400px|columnAttributes:width=100px}
||One||Two||Three||Four||
|foo|bar|foo|bar|
{table-plus}

to set column widths. More examples of the formatting for {table-plus} are available at https://studio.plugins.atlassian.com/wiki/display/TBL/Table-plus+macro

Hope that helps,

Andrew.

All comments

John Masson

Hi Timothee,

The Table Plus Macro doesn't support Confluence 4.0, so for now you'll need to insert the markup for it using the dialog accessble from 'Inert' > 'Wiki markup'.

Thanks,
John

Timothee Timoth

I haven't found what the markup should look like though?

Andrew Frayling

Hi Timothee,

I don't think you can set column widths for tables without the {table-plus} macro and it doesn't look like this feature is on the native roadmap according to https://jira.atlassian.com/browse/CONF-1398

One way around it is to use {section} and {column} macros, e.g.

{section:border=true}
 
{column:width=30%}
Text for this column goes here. This is  the smaller column with a width of only 30%.
{column}
 
{column:width=70%}
Text for this column goes here. This is  the larger column with a width of 70%.
{column}
 
{section}

Not sure if that would work for you?

Andrew.

Timothee Timoth

Ouch .. ok .. I see how that example works. It's pretty much impossible to edit or maintain complex tables that way though. Not that table support was particularly advanced in earlier versions, but it seems it took a bit of a dive

Any way to seamlessly embed excel spreadsheets maybe? If not I may just take a screenshot and attach. But it's going to make PDF exports less useful.

Andrew Frayling

Starting again If you have admin rights you could enable the {html} macro in Confluence Admin -> Plugins -> Confluence HTML Macros and then enter something along the lines of:

{html}
&lt;table border="1" width="100%"&gt;
&lt;tr&gt;
&lt;td width="33%"&gt;One&lt;/td&gt;
&lt;td width="33%"&gt;Two&lt;/td&gt;
&lt;td width="33%"&gt;Three&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
{html}

in the editor.

{table-plus:border=1|width=400px|columnAttributes:width=100px}
||One||Two||Three||Four||
|foo|bar|foo|bar|
{table-plus}

to set column widths. More examples of the formatting for {table-plus} are available at https://studio.plugins.atlassian.com/wiki/display/TBL/Table-plus+macro

Hope that helps,

Andrew.

Timothee Timoth

Thanks .. I've asked our IT to look into enabling those..

Rachel Dunlop

How do I do this in Confluence 4+? I tried adding "width=100px" to the Column Attributes field but it didn't work?

Sherif Mansour

We have an open feature request for this, by the way https://jira.atlassian.com/browse/CONF-3393

Rand McKinney1

One simple but kind of hacky way is to insert an invisible "div" tag into a cell for which you want to specify the width. Use the free Adaptavist div macro and in the style parameter, specify width: 100px; (or whatever width you want to set). You'll have to do this for each column you want to size, but it's pretty easy and you can still use the visual table editor.

Kelly Schoenhofen

I just found the method that Burke Mamlin put out here - https://jira.atlassian.com/browse/CONF-3393 - he wrote a snippet of html/javascript that you insert into Confluence Administration > Custom HTML > At the end of HEAD, then you can set column widths by prefixing column names with "200|" for 200 pixels, or "20%|" for 20%, et al. So far it's been dreamy. Thank you @Burke Mamlin (not sure if I got the right one, there's 4).

Edit: apparently the original version is hard to find now. Here's the latest version we're using. It's been less useful as time goes by though - it works best for very specific situations, and it's definitely not for everyone. We've had users remove the values from tables when editing pages because they didn't know why they were there and were just trying to clean up/help. They also didn't notice when the tables re-sized themselves afterwards as well

Put this in your custom html HEAD:

&lt;script type="text/javascript"&gt;
&lt;!--
AJS.$(document).ready(function() {
  AJS.$('#content .wiki-content table').find('tr:first &gt; th,tr:first &gt; td').each(function() {
    var match = /^\s*((\d+)(px|%)?)\s*\|(.*)/.exec(this.textContent)
    if (match != null) {
      this.width = match[1]
      this.textContent = match[4]
    }
  })
})
--&gt;
&lt;/script&gt;

bmamlin

You're welcome! Hope it works well for you. If it does, pay it forward by giving someone a hug today. :-)

unknown

Thanks!

Tim Mohrbach

this works like a charm!

Tim Durden

As a very ugly workaround, try copying and pasting a few whitespace characters / line breaks.

Konstantin Koro

Where do we find a copy of this snippet, CONF-3393 does not seem to have it. Could you please add it to this comment.

Steffen Heller

...or use a spacer gif.

Steven F Behnke

It's funny that this question is on the top answers, but this information is massively outdated. You can now drag columns to set width in the editor.

Pablo Serra

Hi Steve, is it available on version 5.9.4? I can't drag columns as described by you.

Jeffrey Pfeifer

The simplest solution without playing around with the markup...

On the top row of any column you want to have a specific width, insert a DIV macro/plugin in that cell. On the DIV add a style for the width in the div settings page, for example width: 400px. The div expansion, will force the table column to that size.

BeanbasketB

.issue-table > tbody > tr > td {
width:auto;

}
.issue-table > thead > tr > th {
width:auto;
}

Noumenon72

Note that dragging may not seem to be working because when you widen a column to prevent word wrap, the word wrap comes back when you save the page. This is because the sidebar is not present while editing, so you have to add more space in edit mode than you think you need.

Diego Cantor

Really? 2020 and we need to hack something together, or pay for an extra plugin because we can't resize the columns of a table? This is ridiculous.

Alexander Karch

Correct!

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

confluence