Modifying page layout TD width

Question

I am currently using a page layout that has 3 columns with a header and footer. When I use inspect element I see a table with #layoutsTable. The first TR is the header, then on the second TR the TD's all have widths specified via inline css.

<td style="width: 33.3%"></td>
<td class="ms-wiki-columnSpacing" style="width: 60%"></td>
<td class="ms-wiki-columnSpacing" style="width: 33.3%"></td>

I've tried overiding the widths using a Script Editor web part and using !important. Tried different CSS styles. Nothing seems to work. My goal is to decrease that 50% in the 2nd cell.

.ms-wiki-columnSpacing {width: 33.3%!important}

Also tried using nth child:

#layoutsTable TBODY TR:nth-child(2) TD {width: 33.3% !important;}

Am I going about this the wrong way? Should I create a new page layout that does not have inline css width?

Answer 1

The ordering rules of CSS is complex to start with, and to use !important makes it even harder. You can read more about it in the accepted answer to the question "In which order do CSS stylesheets override?"

In your case I'd create the page layout you need, and avoid inline CSS.