HTML overwrite SAP CSS styles

Question

I want to add a table to an SAP website, but I can't seem to make it look good in any way, because the website simply removes any styles. Padding, margin and so on are simply removed somehow.

<table style="width:1024px;font-family:arial;border-spacing: 5 5" cellpadding="5px">
  <tr>
    <td bgcolor="#005028" height="40"><font color="white" size="4"><b>First Aid</b></font></td>
    <td bgcolor="#005028"><font color="white" size="4"><b>Phone</b></font></td>
    <td bgcolor="#005028"><font color="white" size="4"><b>Security Officer</b></font></td>
    <td bgcolor="#005028"><font color="white" size="4"><b>Phone</b></font></td>
    <td bgcolor="#005028"><font color="white" size="4"><b>Fire Protection</b></font></td>
    <td bgcolor="#005028"><font color="white" size="4"><b>Phone</b></font></td>
  </tr>
  <tr>
    <td bgcolor="#D3D3D3" height="30">name</td>
    <td bgcolor="#D3D3D3" height="30">111</td>
    <td bgcolor="#FFFFFF" height="30">name</td>
    <td bgcolor="#FFFFFF" height="30">111</td>
    <td bgcolor="#FFFFFF" height="30">name</td>
    <td bgcolor="#FFFFFF" height="30">111</td>
  </tr>
  <tr>
    <td bgcolor="#D3D3D3" height="30">name</td>
    <td bgcolor="#D3D3D3" height="30">111</td>
    <td bgcolor="#D3D3D3" height="30">name</td>
    <td bgcolor="#D3D3D3" height="30">111</td>
    <td bgcolor="#D3D3D3" height="30">name</td>
    <td bgcolor="#D3D3D3" height="30">111</td>
  </tr>
</table>

this is looking like i want it to, besides the fact, that it has no padding or any margins. i tried it with CSS, but this gets completely removed. I had a conversation with someone who was able to overwrite it with !important , but this didn't work for me.

<style>
table{
    width: 1024px!important;
    font-family: arial!important;
    padding: 5px!important;
    border-collapse:separate!important; 
    border-spacing:4px!important;
}

td.head{
    background-color:#005028!important;
    height:40px!important;
    padding: 5px!important;
    color: white!important;
    margin: 5px!important;
}
tr{
    background-color:#D3D3D3!important;
    height:30px!important;

}
td.phone{
    width: 70px!important;
    padding: 5px!important;
    margin: 5px!important;

}
td.name{
    width: 245px!important;
    padding: 5px!important;
    margin: 5px!important;
}

</style>
<table>
  <tr>
    <td class="head"><font color="white" size="4"><b>First Aid</b></font></td>
    <td class="head phone"><font color="white" size="4"><b>Phone</b></font></td>
    <td class="head"><font color="white" size="4"><b>Security Officer</b></font></td>
    <td class="head phone"><font color="white" size="4"><b>Phone</b></font></td>
    <td class="head"><font color="white" size="4"><b>Fire Protection</b></font></td>
    <td class="head phone"><font color="white" size="4"><b>Phone</b></font></td>
  </tr>
  <tr>
    <td class="name">name</td>
    <td class="phone">111</td>
    <td class="name">name</td>
    <td class="phone">111</td>
    <td class="name">name</td>
    <td class="phone">111</td>
  </tr>
  <tr>
    <td class="name">name</td>
    <td class="phone">111</td>
    <td class="name">name</td>
    <td class="phone">111</td>
    <td class="name">name</td>
    <td class="phone">111</td>
  </tr>
</table>

Any suggestion is appreciated. I am not that good in html and since my css try was a complete disaster, i would like to stay in plain html

Answer 1

Use more specifics when calling your CSS changes. Instead of using table , name the elements using ids and classes and call those instead. CSS sets priority based on specificity. Here is an informative write-up on it.

An Alternative for Firefox users is their HTML Style Scoped feature.

<div>
<style scoped>
h1 {color:red;}
p {color:blue;}
</style>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</div>

Here is a bit more documentation on it.