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是一個更多的文檔。