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

[Timothee Timothee]

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.

[Andrew Frayling · Accepted solution]

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}
<table border="1" width="100%">
<tr>
<td width="33%">One</td>
<td width="33%">Two</td>
<td width="33%">Three</td>
</tr>
</table>
{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.

[Timothee Timothee]

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?

[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:

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

[bmamlin]

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

[Tim Mohrbach]

this works like a charm!

[Konstantin Korostin]

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.

[Kelly Schoenhofen]

Done, I edited my original answer.

[Christof Hurst]

Instead of

this.textContent = match[4]

it ist better to use

this.innerHTML = this.innerHTML.replace(match[1]+"|", "")

So all formatting will be preserved.

[Andy "Krazy" Glew]

You do realize that requiring administrator privileges to change the width of a column is pretty f**g broken, don't you?

Ditto having to use a macro, different than the existing.

I have existing tables, prepared with Confluence's default not-quite-WYSIWYG table editing facilities. Many of them. Their column widths are broken.  I would like to fix them, not start over.

[Dmitry Ree]

if you prefix columns names then content cannot be retrieved using page properties report

[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!

[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.

[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.

[Rand McKinney]

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.

[Deleted user]

Thanks!

[Sherif Mansour]

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

[BeanbasketB]

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

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

[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. 

[Tim Durden]

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

[Steffen Heller]

...or use a spacer gif.

[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 Timothee]

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.

[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 Timothee]

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