Assistance with HTML syntax in HTML macro for table styling

[Rachel Bedi]

I have a table on one of my confluence pages that I would like to have more freedom styling things such as column widths, borders etc. Specifically I am having trouble with getting the correct syntax to set column widths for the table in HTML. 

The below code is what I have inserted into my HTML macro and works perfectly, could someone give me a hand with adding in the colgroup and col widths into this snippet?

Thank you so much in advance!

<style> 

#com-atlassian-confluence table, 
#com-atlassian-confluence .confluenceTable    {       border-collapse: collapse;
                                                                                            padding: 0px;
                                                                                            height: 100%;
                                                                                            border-left:   1px solid rgb(100,100,100);
                                                                                    border-top:    1px solid rgb(100,100,100); 
                                                                                    border-right:  1px solid rgb(100,100,100); 
                                                                                    border-bottom: 1px solid rgb(100,100,100); 
																				
                                                                                    }

#com-atlassian-confluence th, 
#com-atlassian-confluence .confluenceTd       {       border-collapse: collapse; 
                                                                                            font-size: 14px;
                                                                                            padding-left:   5px;
                                                                                            padding-right:  5px;
                                                                                            padding-top:    5px;
                                                                                            padding-bottom: 5px;
                                                                                            height:100%;
                                                                                            border-left:   1px solid rgb(100,100,100);
                                                                                    border-top:    1px solid rgb(100,100,100); 
                                                                                    border-right:  1px solid rgb(100,100,100); 
                                                                                    border-bottom: 1px solid rgb(100,100,100); 
                                                                                    }


</style>

[Laurie Sciutti]

Hi @Rachel Bedi ~ what happens when you use the <colgroup> element?  As long as you define it with at least one <col> element within the table element, it should work....

The colgroup element must be used inside a table element and must contain one or more col elements, each representing a column in the group. You can use the span attribute to specify the number of columns that the colgroup should apply to.

You can also use the width attribute to specify the width of each column in the group, either as a percentage or in pixels. This can be useful for ensuring that all the columns in the group have the same width.

Ref:  https://webreference.com/html/tags/colgroup/   

[Rachel Bedi]

Hi Laurie,

thanks so much for the response! The infamous "nothing" happens when I use the <colgroup> element and I suspect it's because I am placing it inappropriately within the code block, or I am using inappropriate syntax, or a fun mix of both. 

Here's a couple of examples of what I've tried;

<style> 

#com-atlassian-confluence table, 
#com-atlassian-confluence .confluenceTable    {       border-collapse: collapse;
                                                                                            padding: 0px;
                                                                                            height: 100%;
                                                                                            border-left:   1px solid rgb(100,100,100);
                                                                                    border-top:    1px solid rgb(100,100,100); 
                                                                                    border-right:  1px solid rgb(100,100,100); 
                                                                                    border-bottom: 1px solid rgb(100,100,100); 
                                                      colgroup:
                                                        col style= width: 50px; text align: center;
                                                                              
                                                                                    }
</style>

<style> 

#com-atlassian-confluence table, 
#com-atlassian-confluence .confluenceTable { border-collapse: collapse;
padding: 0px;
height: 100%;
border-left: 1px solid rgb(100,100,100);
border-top: 1px solid rgb(100,100,100); 
border-right: 1px solid rgb(100,100,100); 
border-bottom: 1px solid rgb(100,100,100); 
<colgroup>
 <col style="width: 50px; text align: center;"
</colgroup>
}
</style> 

I appreciate the patience and help, I'm still fairly new to using HTML and while I've been pretty successful with a lot of other formatting etc, this table is definitely getting the best of me! 

[Rachel Bedi]

I figured it out, and also appear to have identified a bug when applying HTML code to confluence tables. If the first row of a table is a header row, then the alignment and font color properties do not function as expected under th. If the data is in ANY other row in a table and is identified as a header row, then the formatting operates as expected. 

#com-atlassian-confluence th:nth-child(1), 
#com-atlassian-confluence .confluenceTable th:nth-child(1)  { background-color: blue; font-size: 16px; text-align: center; width: 2%;}   
#com-atlassian-confluence th:nth-child(2), 
#com-atlassian-confluence .confluenceTable th:nth-child(2)  { background-color: green; font-size: 16px; text-align: center; width: 27%;}
#com-atlassian-confluence th:nth-child(3), 
#com-atlassian-confluence .confluenceTable th:nth-child(3)  { background-color: green; font-size: 16px; text-align: center; width: 20%;}
#com-atlassian-confluence th:nth-child(4), 
#com-atlassian-confluence .confluenceTable th:nth-child(4)  { background-color: green; font-size: 16px; text-align: center; width: 15%;} 
#com-atlassian-confluence th:nth-child(5), 
#com-atlassian-confluence .confluenceTable th:nth-child(5)  { background-color: green; font-size: 16px; text-align: center; width: 10%;}  
#com-atlassian-confluence th:nth-child(6), 
#com-atlassian-confluence .confluenceTable th:nth-child(6)  { background-color: green; font-size: 16px; text-align: center; width: 15%;} 
#com-atlassian-confluence th:nth-child(7), 
#com-atlassian-confluence .confluenceTable th:nth-child(7)  { background-color: green; font-size: 16px; text-align: center; width: 5%;}
#com-atlassian-confluence th:nth-child(8), 
#com-atlassian-confluence .confluenceTable th:nth-child(8)  { background-color: green; font-size: 16px; text-align: center; width: 5%;}      

This will apply to all tables on the page and each column can be adjusted using the nth-child(x)