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/