...
Specific example with fixed layout.
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
Additional links
Parameter/Values
...
Column settings > Formatting > Column type (1
2
3
4
...)
...
width:500px
width:1000px
width:50px
width:50px
...
...
The following 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 |
|---|
|
If you want long words to be wrapped instead of overflowing the column (like shown for column K in the example), add word-wrap: break-word; to the table Table style. | Tip |
|---|
If you find that your widths are not being honored, it's possible that Confluence is setting the column widths to a static width. This can occur if you drag a column to set the width. Confluence tables have a setting to be either Responsive or Fixed width. We have seen cases where even if the table is set as Responsive, Confluence still applies the static widths. To correct this behavior: - Edit your page and select your table. You are then presented with a Table toolbar in the Confluence page editor.
- Click the Responsive dropdown, select Fixed width, then immediately click the drop-down, and, select Responsive. This resets the table to a responsive setting and clears the fixed widths.
- Save the page and view the table.
 Image Removed
|
|
...
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 examples shows how the Confluence table width setting influences a table column width with just the Column styles macro parameter setting.
| Anchor |
|---|
| at8x_fixedColWidth_Ex1 |
|---|
| at8x_fixedColWidth_Ex1 |
|---|
|
Example 1
| Confluence table toolbar setting | Responsive |
|---|
| Table plus |
|---|
| columnStyles | 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 |
|---|
|
|
| Anchor |
|---|
| at8x_fixedColWidth_Ex2 |
|---|
| at8x_fixedColWidth_Ex2 |
|---|
|
Example 2
| Confluence table toolbar setting | Fixed width |
|---|
| Table plus |
|---|
| columnStyles | 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 |
|---|
|
|
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 |
|---|
| at8x_fixedColWidth_Ex3 |
|---|
| at8x_fixedColWidth_Ex3 |
|---|
|
Example 3
| Confluence table toolbar setting | Responsive |
|---|
| Macro editor parameter settings | Table style | table-layout: fixed;width:100% |
|---|
| Table plus |
|---|
| columnStyles | 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 |
|---|
| style | table-layout: fixed; width: 100%; |
|---|
|
|
| Anchor |
|---|
| at8x_fixedColWidth_Ex4 |
|---|
| at8x_fixedColWidth_Ex4 |
|---|
|
Example 4
| Confluence table toolbar setting | Fixed width |
|---|
| Macro editor parameter settings | Table style | table-layout: fixed; |
|---|
| Table width | 100% |
| Table plus |
|---|
| columnStyles | 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 |
|---|
| width | 100% |
|---|
| style | table-layout: fixed; width: 100%; |
|---|
|
|
| Anchor |
|---|
| at8x_fixedColWidth_Ex5 |
|---|
| at8x_fixedColWidth_Ex5 |
|---|
|
Example 5
| Confluence table toolbar setting | Responsive |
|---|
| Macro editor parameter setting | Table width | 50% |
|---|
| Table plus |
|---|
| columnStyles | 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 |
|---|
| width | 50% |
|---|
|
|
| Anchor |
|---|
| at8x_fixedColWidth_Ex6 |
|---|
| at8x_fixedColWidth_Ex6 |
|---|
|
Example 6
| Confluence table toolbar setting | Fixed width |
|---|
| Macro editor parameter setting | Table width | 50% |
|---|
| Table plus |
|---|
| columnStyles | 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 |
|---|
| width | 50% |
|---|
|
|