Inheriting css on wordpress pages from Theme

Question

Desperately looking for help with determining if there is the possibility to ignore css styles on my wordpress website?

My friend asked me for help in creating the site of his new company at the beginning I wanted to refuse but it is a good friend, so I thought "I will install wordpress, a few clicks and done". Now it has come to me how much I have underestimated the frontend devs and through what hell they are going through to ensure the responsiveness of the site with the help of this ... css.

I apologize for this introduction but for a few hours I am trying to make a very simple responsive table in html. It turned out that I'm doing everything correctly but my wordpress skin changes the style of almost all tags that I want to use, for example, table, tr, td and to "reset" the css style for this element my html fragment instead of clean nice html is HELL!

Every html element inherits from theme and I have to "reset" it to "default" values.

<table style="border: none; vertical-align: initial; table-layout: fixed; padding: 10px 10px 10px 10px;" cellpadding="5">
   <tbody>
      <tr>
         <td style="border: none;">
            <table style="border: none !important; vertical-align: middle; border-collapse: collapse; border-color: #ddddddd;" cellpadding="5">
               <tbody style="border: none;">
                  <tr>
                     <th style="border-color: #21288f; text-align: center;" colspan="2"><span style="border: none; color: #21288f; text-align: center;"> FACILITY MANAGEMENT </span></th>
                     <th style="border: none;"></th>
                  </tr>
                  <tr style="border: none; vertical-align: middle; padding-bottom: 0px; padding: 10px 10px 10px 10px; display: block margin-bottom: 0em; height: 10%;" valign="middle">
                     <td style="border: none; padding: 10px 10px 10px 10px; vertical-align: middle; display: block margin-bottom: 0em;" valign="middle"><img style="min-width: 30px; min-height: 30px; ;vertical-align: middle; margin-bottom: 0px;" alt="" width="50" height="50" /></td>
                     <td style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; display: block margin-bottom: 0em;" valign="middle"><span style="color: #21288f;">TEXT1</span></td>
                     <td style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; display: block margin-bottom: 0em;" rowspan="6" valign="middle"></td>
                  </tr>
                  <tr style="border: none; vertical-align: middle; padding-bottom: 0px; padding: 10px 10px 10px 10px; margin-bottom: 0em;" valign="middle">
                     <td style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; margin-bottom: 0em;" valign="middle"><img style="vertical-align: middle; margin-bottom: 0px;"  alt="" width="50" height="50" /></td>
                     <td style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; margin-bottom: 0em; height: 10%;" valign="middle"><span style="color: #21288f;">TEXT2</span></td>
                  </tr>
                  <tr style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; margin-bottom: 0em;" valign="middle">
                     <td style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; margin-bottom: 0em;" valign="middle"><img style="vertical-align: middle; margin-bottom: 0px;"  alt="" width="50" height="50" /></td>
                     <td style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; margin-bottom: 0em; height: 10%;" valign="middle"><span style="color: #21288f;">TEXT3</span></td>
                  </tr>
                  <tr style="border: none; vertical-align: middle;">
                     <td style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; margin-bottom: 0em;" valign="middle"><img style="vertical-align: middle; margin-bottom: 0px;"  alt="" width="50" height="50" /></td>
                     <td style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; margin-bottom: 0em; height: 10%;" valign="middle"><span style="color: #21288f;">TEXT4</span></td>
                  </tr>
                  <tr style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; margin-bottom: 0em;" valign="middle">
                     <td style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; margin-bottom: 0em;" valign="middle"><img style="vertical-align: middle; margin-bottom: 0px;"  alt="" width="50" height="50" /></td>
                     <td style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; margin-bottom: 0em; height: 10%;" valign="middle"><span style="color: #21288f;">TEXT4</span></td>
                  </tr>
                  <tr style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; margin-bottom: 0em;" valign="middle">
                     <td style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; margin-bottom: 0em;" valign="middle"><img style="vertical-align: middle; margin-bottom: 0px;"  alt="" width="50" height="50" /></td>
                     <td style="border: none; vertical-align: middle; padding: 10px 10px 10px 10px; margin-bottom: 0em; height: 10%;" valign="middle"><span style="color: #21288f;">TEXT4</span></td>
                  </tr>
               </tbody>
            </table>
            &nbsp;
         </td>
         <td style="border: none;"><img class="wp-image-630 aligncenter"  alt="" width="322" height="255" />
            <img class="wp-image-631 aligncenter"  alt="" width="311" height="240" />
         </td>
      </tr>
      <tr>
         <td style="border: none;"></td>
         <td style="border: none;"></td>
      </tr>
   </tbody>
</table>
&nbsp;

I will take every advice on how to deal with it so that my posts do not inherit from the wordpress theme.

Answer 1

I would recommend to first look at the themes documentation, you may provide a link to the site or more specific information.

Maybe the theme provides some options or a tutorial for a child theme?

Anyways. Inline css attributes are taken over all but they may not be neccessary (sometimes they are)

Take a look at css specificity: https://css-tricks.com/specifics-on-css-specificity/

You need to find out what css selectors are beeing used to style the tables (browser dev tools) and then make stronger ones that overrides them, even if they are parsed before them.

you then can put them in a <style> tag before the table or somewhere else in a css file that gets not overwritten by updates(Child theme)

Update: after looking at https://demo.themegrill.com/spacious/wp-content/themes/spacious/style.css from the themes demo there is the table styling starting from line 54

you should be able to override it with

body table {
/* original values
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0 0 1.5em;
    width: 100%;
*/

}

body th {
/* original values
    font-weight: bold;
    border: 1px solid #EAEAEA;
    padding: 6px 10px;
*/
}

body td {
/* original values
    border: 1px solid #EAEAEA;
    padding: 6px 10px;
*/
}

body caption, 
body th, 
body td {
/* original values
    text-align: left;
*/
}

the easiest way for you is put that css into the themes Custom CSS option as this is a feature promoted here: https://themegrill.com/themes/spacious/#all-features