HTML覆盖SAP CSS样式

Question

我想向SAP网站添加一张表，但似乎无法以任何方式使它看起来很好，因为网站只是删除任何样式。以某种方式简单地删除填充，边距等。

<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> 

这看起来像我希望它，除了事实，它没有填充或任何边距。我试着用CSS，但是这完全被删除。我和一个能够用!important覆盖它的人进行了一次对话，但这对我没有任何作用。

<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> 

任何建议表示赞赏。我不是很好的HTML，因为我的CSS尝试是一个完整的灾难，我想留在纯粹的HTML

Answer 1

在调用CSS更改时使用更多细节。代替使用table，请使用ID和类命名元素，然后调用它们。 CSS根据特异性设置优先级。 Here是一个内容丰富的写作。

Firefox用户的替代方法是他们的HTML Style Scoped功能。

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

Here是一个更多的文档。