如何为同用th/td标签的两个KPI表格设置不同背景色？

需要将2个KPI转换为HTML格式，要求两个值上下排列且尺寸一致，同时保留KPI的色彩差异。当前使用的HTML代码如下：

<HEAD>
<STYLE>
table {
  table-layout: fixed ;
  width: 100% ;
}
tr, td {
  border: 5px solid white;
  border-radius: 10px;
  width: 25% ;
}
</STYLE>
</HEAD>

<TABLE width="100%" align=center>

<TBODY>

<TR>
<TD align=left background= "2f4e62">
    <br>
    <FONT color=145c98 face="Arial" size=5>
    <SPAN><b>&nbsp;<SpotfireControl id="48ac888b3e154a5bb7dc449c167d036b" /></b></SPAN>
    
    </FONT>
    </br>
    <FONT color=145c98 face="Arial" size=3>&nbsp;MAX VEICOLI PESANTI
    
    <br>
    <FONT color=145c98 face="Arial" size=5>
    <SPAN><b>&nbsp;<SpotfireControl id="7dddd2eeed054fe98e913bc6ecb7d579" /></b></SPAN>
    
    </FONT>
    </br>
    <FONT color=145c98 face="Arial" size=3>&nbsp;MAX VEICOLI LEGGERI</TD>

</TR>

</TBODY></TABLE>

目前存在两个问题：直接为TD设置背景色无效；若为tr、td设置全局样式则会影响左侧KPI的颜色，需要修复特定表格的颜色设置。

核心修复点 #

• 背景色无效是因为颜色值缺少#前缀，且建议使用background-color属性替代background，语义更明确。
• 通过给目标表格添加专属类名，实现样式隔离，避免全局样式污染其他KPI元素。
• 用div包裹每个KPI项，配合CSS统一控制尺寸，确保上下排列的一致性；同时替换过时的<FONT>标签，用CSS统一管理字体样式。

修改后的完整代码 #

<HEAD>
<STYLE>
/* 全局样式不改动，新增专属表格样式 */
.kpi-table {
  table-layout: fixed;
  width: 100%;
}
.kpi-table tr, .kpi-table td {
  border: 5px solid white;
  border-radius: 10px;
  width: 25%;
  background-color: #2f4e62; /* 正确的背景色写法 */
  padding: 10px;
}
/* KPI项统一样式，保证尺寸一致 */
.kpi-item {
  margin-bottom: 20px;
  font-family: Arial, sans-serif;
}
.kpi-value {
  color: #145c98;
  font-size: 1.5em; /* 替代size=5，更灵活 */
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
}
.kpi-label {
  color: #145c98;
  font-size: 1em; /* 替代size=3 */
  display: block;
}
</STYLE>
</HEAD>

<TABLE class="kpi-table" align=center>
<TBODY>
<TR>
<TD align=left>
    <div class="kpi-item">
        <span class="kpi-value">&nbsp;<SpotfireControl id="48ac888b3e154a5bb7dc449c167d036b" /></span>
        <span class="kpi-label">&nbsp;MAX VEICOLI PESANTI</span>
    </div>
    <div class="kpi-item">
        <span class="kpi-value">&nbsp;<SpotfireControl id="7dddd2eeed054fe98e913bc6ecb7d579" /></span>
        <span class="kpi-label">&nbsp;MAX VEICOLI LEGGERI</span>
    </div>
</TD>
</TR>
</TBODY>
</TABLE>

说明 #

1. 给表格添加class="kpi-table"，所有针对该表格的样式都通过这个类名限定，不会影响页面其他元素。
2. 背景色使用#2f4e62的正确格式，解决了之前背景色不生效的问题。
3. 用div.kpi-item包裹每个KPI，配合CSS的margin-bottom和统一的字体样式，确保两个KPI上下排列且尺寸一致。
4. 替换<FONT>标签为CSS类，符合现代HTML标准，样式维护更方便。

内容的提问来源于stack exchange，提问作者tech_ofedges