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是关于它的更多文档。

HTML覆盖SAP CSS样式

1 个答案: