CODEWITHSUNDEEP
htmlcss
XtremeBaumer
XtremeBaumer

Reputation: 6435

HTML overwrite SAP CSS styles

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

Upvotes: 1

Views: 871

Answers (1)

Ethilium
Ethilium

Reputation: 1234

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.

Upvotes: 2

Related Questions