表格行列高亮时上下边框缺失且表头未被纳入列高亮范围的CSS/HTML问题

我看了你的代码和截图，问题主要出在两个地方：列高亮没覆盖表头行，还有列的上下边框没正确设置，咱们一步步来修正：

问题1：表头未被纳入列高亮范围 #

你原来的JS代码里，列高亮只遍历了tableBody（也就是<tbody>）里的行，完全没处理<thead>里的表头行。所以需要在鼠标进入/离开时，同时给表头对应的列单元格加上高亮类。

修改鼠标事件里的列高亮部分，加上对表头行的处理：

// 鼠标进入时的列高亮（新增表头处理）
const headerCell = document.querySelector('#tableHeaders').cells[colIdx];
if (headerCell) headerCell.classList.add('highlight-column');
// 原来的tbody列处理保留
tableBody.querySelectorAll('tr').forEach(row => {
  const targetCell = row.cells[colIdx];
  if (targetCell) targetCell.classList.add('highlight-column');
});

// 鼠标离开时的列高亮（新增表头处理）
const headerCellLeave = document.querySelector('#tableHeaders').cells[colIdx];
if (headerCellLeave) headerCellLeave.classList.remove('highlight-column');
// 原来的tbody列处理保留
tableBody.querySelectorAll('tr').forEach(row => {
  const targetCell = row.cells[colIdx];
  if (targetCell) targetCell.classList.remove('highlight-column');
});

问题2：列高亮的上下边框缺失 #

你原来的.highlight-column类只加了左右边框，而且因为表格是border-collapse: collapse模式，给<tr>加边框不会生效（border-collapse下<tr>的边框被忽略）。咱们调整CSS和行高亮的实现：

修正列高亮的CSS

给.highlight-column添加上下红边框，确保整列都有完整的红框：

.highlight-column {
  border-left: 2px solid #FD6262;
  border-right: 2px solid #FD6262;
  border-top: 2px solid #FD6262;
  border-bottom: 2px solid #FD6262;
}

修正行高亮的CSS

原来的.highlight-row是给<tr>加边框，但border-collapse下无效，改成给行内的所有单元格加上下红边框：

.highlight-row td, .highlight-row th {
  border-top: 2px solid #FD6262;
  border-bottom: 2px solid #FD6262;
}

优化选中单元格的优先级

为了避免选中单元格的边框被行/列高亮覆盖，给.highlight-cell加个!important提升优先级，同时设置层级确保它在最上层：

.highlight-cell {
  border: 2px solid #FD6262 !important;
  background-color: rgba(255, 0, 0, 0.2);
  position: relative;
  z-index: 1;
}

修正后的完整代码 #

下面是整合了所有修改的完整代码，你可以直接替换原来的内容：

JavaScript部分

// Static test data
const correlationData5y = {
    "Stock A": { "Stock A": 1.0, "Stock B": 0.75, "Stock C": -0.3 },
    "Stock B": { "Stock A": 0.75, "Stock B": 1.0, "Stock C": 0.2 },
    "Stock C": { "Stock A": -0.3, "Stock B": 0.2, "Stock C": 1.0 }
};

// Prepare the table
const tableBody = document.querySelector('#correlationTable tbody');
const tableHeaders = document.querySelector('#tableHeaders');

// Extract tickers from the keys of the correlation data
const tickers = Object.keys(correlationData5y);

// Generate table headers dynamically from the tickers
const headerRow = document.createElement('th');
headerRow.textContent = ''; // Top-left corner (empty)
tableHeaders.appendChild(headerRow);  // Add the empty top-left cell
tickers.forEach(ticker => {
    const headerCell = document.createElement('th');
    headerCell.textContent = ticker; // Add ticker as header
    tableHeaders.appendChild(headerCell);
});

// Helper function to determine the cell color class based on correlation value
function getCellClass(value) {
    if (value < 0) return 'negative'; // Light blue for negative correlations
    if (value < 0.3) return 'low';     // Medium light blue for low correlations
    if (value < 0.6) return 'medium';  // Medium dark blue for medium correlations
    return 'high';                    // Dark blue for high correlations
}

// Create rows for the table dynamically from the data
tickers.forEach(tickerRow => {
    const row = document.createElement('tr');
    const headerCell = document.createElement('th');
    headerCell.textContent = tickerRow;  // Row header (ticker)
    row.appendChild(headerCell);

    tickers.forEach(tickerCol => {
        const cell = document.createElement('td');
        const value = correlationData5y[tickerRow][tickerCol];
        cell.textContent = value.toFixed(2);  // Show correlation value with 2 decimals
        cell.classList.add('heatmap-cell', getCellClass(value));  // Add the appropriate color class
        row.appendChild(cell);
    });

    tableBody.appendChild(row);
});

// Highlight row and column, changing styles only as needed
const tableCells = document.querySelectorAll('td');
tableCells.forEach(cell => {
    cell.addEventListener('mouseenter', () => {
        const rowIdx = cell.parentNode.rowIndex;
        const colIdx = cell.cellIndex;

        // Highlight the row
        const row = tableBody.rows[rowIdx - 1]; // Adjust for header row
        row.classList.add('highlight-row');

        // Highlight the column - 新增表头处理
        const headerCell = document.querySelector('#tableHeaders').cells[colIdx];
        if (headerCell) headerCell.classList.add('highlight-column');
        tableBody.querySelectorAll('tr').forEach(row => {
            const targetCell = row.cells[colIdx];
            if (targetCell) targetCell.classList.add('highlight-column');
        });

        // Highlight the specific cell
        cell.classList.add('highlight-cell');
    });

    cell.addEventListener('mouseleave', () => {
        const rowIdx = cell.parentNode.rowIndex;
        const colIdx = cell.cellIndex;

        // Remove row highlight
        const row = tableBody.rows[rowIdx - 1];
        row.classList.remove('highlight-row');

        // Remove column highlight - 新增表头处理
        const headerCellLeave = document.querySelector('#tableHeaders').cells[colIdx];
        if (headerCellLeave) headerCellLeave.classList.remove('highlight-column');
        tableBody.querySelectorAll('tr').forEach(row => {
            const targetCell = row.cells[colIdx];
            if (targetCell) targetCell.classList.remove('highlight-column');
        });

        // Remove cell highlight
        cell.classList.remove('highlight-cell');
    });
});

CSS部分

/* General Page Styling */
body {
    font-family: 'Arial', sans-serif;
    margin: 20px;
    background-color: #141416;  /* Dark background */
    color: #fff;  /* White text for contrast */
}

h2 {
    text-align: center;
    font-size: 20px;  /* Smaller title font */
    margin-bottom: 20px;  /* Reduced space */
    color: #FD6262;  /* Red color for titles */
}

table {
    width: 70%;  /* Reduced table width */
    margin: 0 auto;
    border-collapse: collapse;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    background-color: #222;  /* Dark table background */
}

th, td {
    padding: 8px;  /* Reduced padding */
    text-align: center;
    font-size: 12px;  /* Smaller font size */
    transition: background-color 0.3s ease;
    border: 1px solid #444;  /* Dark border for all sides */
}

th {
    background-color: #141416;  
    color: #FD6262;  /* Red color for text */
    font-weight: bold;
}

td {
    font-size: 12px;  /* Smaller font size for data */
    color: #fff;  /* White text color for values */
    font-weight: normal;
}

/* Gradient color scale for the heatmap (from light blue to dark blue) */
.negative {
    background-color: rgba(52, 152, 219, 0.2);  /* Light blue for negative correlations */
}

.low {
    background-color: rgba(52, 152, 219, 0.4);  /* Medium light blue for low correlations */
}

.medium {
    background-color: rgba(52, 152, 219, 0.6);  /* Medium dark blue for medium correlations */
}

.high {
    background-color: rgba(52, 152, 219, 1);  /* Dark blue for high correlations */
}

/* Hover effect */
td:hover {
    cursor: pointer;
}

/* Container for scroll */
.table-container {
    overflow-x: auto;
    margin-top: 30px;  /* Adjusted margin */
}

/* Highlighted row style - 修改为给单元格加边框 */
.highlight-row td, .highlight-row th {
    border-top: 2px solid #FD6262;
    border-bottom: 2px solid #FD6262;
}

/* Highlighted column style - 添加上下边框 */
.highlight-column {
    border-left: 2px solid #FD6262;
    border-right: 2px solid #FD6262;
    border-top: 2px solid #FD6262;
    border-bottom: 2px solid #FD6262;
}

/* Highlighted cell style */
.highlight-cell {
    border: 2px solid #FD6262 !important;
    background-color: rgba(255, 0, 0, 0.2);
    position: relative;
    z-index: 1;
}

HTML部分（无需修改）

<div class="table-container">
    <table id="correlationTable">
        <thead>
            <tr id="tableHeaders">
                <!-- Table headers will be populated dynamically -->
            </tr>
        </thead>
        <tbody>
            <!-- Table rows will be populated by JavaScript -->
        </tbody>
    </table>
</div>

这样修改后，表头会被列高亮覆盖，列的上下边框也会显示完整，行高亮的边框也能正确渲染啦～

备注：内容来源于stack exchange，提问作者Christof Beckers