Resize tables in Confluence page to have same column widths?

Nick Schuette

I have a page on Confluence that has multiple tables with the same headings (information about various environments), and I'd like to resize the columns to all be the same width, but I see no easy way to do this. I'd rather not make them Fixed Width, as I don't want users to have to scroll horizontally to view the entire table. I just want the responsive design to scale up/down the entire table, and not individual column widths. Is this possible?

Davin Studer

I created a user macro a while ago that let's you set some parameters for tables. One of the params allows you to specify column with.

Macro Name:
advanced_tables

Macro Title:
Advanced Tables

Macro Body Processing:
Rendered

Template:

## Developed by: Davin Studer
## Date created: 04/30/2014

## @param ID:title=Table ID|type=string|required=false|desc=Provide a unique id (no spaces).
## @param AutoNumber:title=Autonumber Rows|type=boolean|desc=This will autonumber the rows in the table that are not heading rows.|default=false
## @param HeadingReset:title=Reset Count|type=boolean|desc=This will reset the count each time a heading row is encountered. (only applicable if Autonumber Rows is checked)|default=false
## @param Zebra:title=Zebra Table|type=boolean|desc=This will alternate the color of the table's rows.|default=false
## @param NoScroll:title=No Table Scroll|type=boolean|desc=This will turn off the scroll bat that is at the bottom of the table in favor of one always at the bottom of the page. This is useful for tables that are wider than the page.|default=false
## @param Width:title=Table Width|type=string|required=false|desc=This will set the width of the table. Acceptable values are in % or px or auto.
## @param Class:title=CSS Class|type=string|required=false|desc=This will assign a css class to the table.
## @param ColWidth:title=Column Widths|type=string|required=false|desc=Use a comma separated list of column widths for the table. Acceptable values are in % or px or auto.

###########################################################################
## These are used for getting around velocity issues when writing jQuery ##
###########################################################################
#set($d = '$')
#set($p = '#')
#set($lt = '<')
#set($gt = '>')

###########################################################################
## Use given ID if present otherwise generate one                        ##
###########################################################################
#if( $paramID && $paramID != "" )
    #set( $id = $paramID )
#else
    #set( $id = $action.dateFormatter.calendar.timeInMillis )
#end

<style type="text/css">
########################################################################################
## Below CDATA fixes issue with greather than and less than symbols being escaped out ##
########################################################################################
/*<![CDATA[*/
################
## Zebra tbl  ##
################
#if ( $paramZebra == true )
${p}table$id tr:nth-child(odd) {background-color: #E0F0FF;}
${p}table$id tr:nth-child(even) {background-color: #FFFFFF;}
#end

################
## No scroll  ##
################
#if ( $paramNoScroll == true )
${p}table$id .table-wrap {overflow-x: visible;}
#end

################
## Tbl width  ##
################
#if ( $paramWidth && $paramWidth != "" )
${p}table${id} table {width: $paramWidth;}
${p}table${id} table table {width: auto;}
#end

################
## Col Width  ##
################
#if ( $paramColWidth && $paramColWidth != "" )
    #set($cols = $paramColWidth.split(","))
    #set ($i = 1)
    #foreach($col in $cols)
        ${p}table$id table tbody:nth-of-type(1) tr:nth-of-type(1)>:nth-child(${i}){width: ${col};}
        ${p}table$id table table tbody:nth-of-type(1) tr:nth-of-type(1)>:nth-child(${i}){width: auto;}
        #set ($i = $i + 1)
    #end
#end
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
AJS.toInit(function(){
    ################
    ## Autonumber ##
    ################
    #if ( $paramAutoNumber == true )
    var number = true;
    #else
    var number = false;
    #end
    
    #if ( $paramHeadingReset == true )
    var reset = true;
    #else
    var reset = false;
    #end
    
    ################
    ## Class      ##
    ################
    #if ( $paramClass && $paramClass != "" )
    var cssClass = '$paramClass';
    #else
    var cssClass = '';
    #end

    if(number) {
        AJS.$('#table$id>div.table-wrap>div.table-wrap>table').each(function() {
            var count = 1;
            AJS.$(this).children('thead,tbody').children('tr').each(function(){
                if(AJS.$(this).children('th').length != 0) {
                    AJS.$(this).prepend('<th class="confluenceTh"> </th>');
                    if(reset) {
                        count = 1;
                    }
                } else {
                    AJS.$(this).prepend('<td class="confluenceTd">' + count + '</td>');
                    count++;
                }
            });
        });
    }

    if(cssClass != "") {
        AJS.$('#table$id>div.table-wrap>div.table-wrap>table').addClass(cssClass);
    }
});
//]]>
</script>

<div id="table$id">$body</div>