如何在Highmap提示框中为表格添加CSS样式

你当前的代码存在一个关键问题：pointFormatter里直接返回<tr>元素，但开启useHTML: true后，需要将表格元素正确包裹在<table>标签内，否则样式可能无法正常生效。下面提供两种更完善的样式实现方案：

方案1：使用内联样式（补全表格结构） #

补全<table>标签，同时给表格、行、单元格统一设置内联样式，保证结构完整性和样式生效：

tooltip: {
    headerFormat: '',
    pointFormatter: function() {
        let txt = '<table style="border-collapse: collapse; width: 200px; background: #fff;">';
        txt += '<tr style="border: 1px solid red;"><td style="padding: 6px 10px; text-align: left;">DATA1</td></tr>';
        txt += '<tr style="border: 1px solid red;"><td style="padding: 6px 10px; text-align: left;">DATA2</td></tr>';
        txt += '</table>';
        return txt;
    },
    footerFormat: '',
    shared: true,
    useHTML: true
}

这里添加了border-collapse: collapse让边框合并，同时给单元格设置内边距，提升提示框的可读性。

方案2：使用外部CSS类（更易维护） #

如果样式逻辑复杂，推荐用外部CSS类管理，避免内联样式的冗余：

1. 先在页面CSS中定义表格样式：

.highmap-tooltip-table {
    border-collapse: collapse;
    width: 220px;
    background-color: #ffffff;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.highmap-tooltip-table tr {
    border-bottom: 1px solid #eeeeee;
}
.highmap-tooltip-table td {
    padding: 8px 12px;
    text-align: left;
    color: #333333;
}
.highmap-tooltip-table tr:last-child {
    border-bottom: none;
}

2. 然后在tooltip配置中引用这些类：

tooltip: {
    headerFormat: '',
    pointFormatter: function() {
        let txt = '<table class="highmap-tooltip-table">';
        txt += '<tr><td>DATA1</td></tr>';
        txt += '<tr><td>DATA2</td></tr>';
        txt += '</table>';
        return txt;
    },
    footerFormat: '',
    shared: true,
    useHTML: true
}

这种方式能让样式集中管理，后续修改样式无需改动JS代码。

注意事项 #

• 必须确保useHTML: true开启，否则Highmap会忽略所有HTML标签和CSS样式。
• 如果使用外部CSS，注意选择器优先级，若出现样式被覆盖的情况，可以结合Highmap默认的tooltip容器类highcharts-tooltip来强化选择器（比如.highcharts-tooltip .highmap-tooltip-table）。

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