Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Description

Specific example with fixed layout. See also Controlling the Width of Table Columns.

Links to examples defined on this page:

  • Example 1: Responsive Confluence table with defined macro column styles
  • Example 2: Fixed width Confluence table with defined macro column styles
  • Example 3: Responsive Confluence table with the Table style macro parameter
  • Example 4: Fixed width Confluence table with the Table style and Table width macro parameters
  • Example 5: Responsive Confluence table with the Table width macro parameter
  • Example 6: Fixed width Confluence table with the Table width macro parameter

Links

Parameter values

The following macro parameter setting is common to all tables in succeeding set of examples:

Column styles

width:500px,width:1000px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px


Tip
titleWrap long words

If you want long words to be wrapped instead of overflowing the column, add word-wrap: break-word; to Table style

Examples of table column width behavior relative to Confluence table settings

You can influence the table column widths using the the Confluence Table toolbar table width settings as shown:

Image Added

The succeeding set of examples shows how the Confluence table width setting influences a table column width with just the Column styles macro parameter setting.

Anchor
at7x_fixedColWidth_Ex1
at7x_fixedColWidth_Ex1
Example 1

Confluence table toolbar settingResponsive


Table plus
columnStyleswidth:500px,width:1000px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px


ABCDEFGHIJKLMNOP
Loremipsum
 
Loremipsum
 








 
Loremipsum
1
1






Anchor
at7x_fixedColWidth_Ex2
at7x_fixedColWidth_Ex2
Example 2

Confluence table toolbar settingFixed width


Table plus
columnStyleswidth:500px,width:1000px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px


ABCDEFGHIJKLMNOP
Loremipsum
 
Loremipsum
 








 
Loremipsum
1
1






The succeeding set of examples show how the table column width

...

changes as per the Table style and Table width macro parameters in conjunction with the Confluence table width settings.

Anchor
at7x_fixedColWidth_Ex3
at7x_fixedColWidth_Ex3
Example 3

Confluence table toolbar settingResponsive
Macro editor parameter settingsTable styletable-layout: fixed;width:100%


Table plus
columnStyleswidth:500px,width:1000px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px
styletable-layout: fixed; width: 100%;


ABCDEFGHIJKLMNOP
Loremipsum
 
Loremipsum
 








 
Loremipsum
1
1






Anchor
at7x_fixedColWidth_Ex4
at7x_fixedColWidth_Ex4
Example 4

Confluence table toolbar settingFixed width
Macro editor parameter settingsTable styletable-layout: fixed;
Table width100%


...

Table plus
columnStyleswidth:500px,width:1000px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px
width100%
styletable-layout: fixed;


ABCDEFGHIJKLMNOP
Loremipsum
 
Loremipsum
 








 

...

Loremipsum
1
1






Anchor
at7x_fixedColWidth_Ex5
at7x_fixedColWidth_Ex5
Example 5

Confluence table toolbar settingResponsive
Macro editor parameter settingTable width50%


Table plus
columnStyleswidth:500px,width:1000px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px
width50%


ABCDEFGHIJKLMNOP
Loremipsum
 
Loremipsum
 








 
Loremipsum
1
1

...







Anchor
at7x_fixedColWidth_Ex6
at7x_fixedColWidth_Ex6
Example 6

Confluence table toolbar settingFixed width
Macro editor parameter settingTable width50%


Table plus
columnStyleswidth:500px,width:1000px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px,width:50px
width50%


ABCDEFGHIJKLMNOP
Loremipsum
 
Loremipsum
 








 

...

Loremipsum

...

1

...

1