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 |
|---|
|
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 setting | Responsive |
|---|
...
|
|---|
| 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 |
|---|
| at7x_fixedColWidth_Ex2 |
|---|
| at7x_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 |
|---|
| at7x_fixedColWidth_Ex3 |
|---|
| at7x_fixedColWidth_Ex3 |
|---|
|
Example 3
| Confluence table toolbar setting | Responsive |
|---|
| Macro editor parameter settings | Table style | table-layout: |
|---|
...
...
| 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 |
|---|
| at7x_fixedColWidth_Ex4 |
|---|
| at7x_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; |
|---|
|
|
...
| Anchor |
|---|
| at7x_fixedColWidth_Ex5 |
|---|
| at7x_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 |
|---|
| at7x_fixedColWidth_Ex6 |
|---|
| at7x_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% |
|---|
|
|
...
...
...