如何清除HTML/React表格行与列之间的空白区域？

我需要移除表格中存在的空白区域，但目前毫无头绪不知该如何实现。以下是实际React代码对应的HTML结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=   , initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table cellspacing="0">
        <div class="tableTitle"></div>
        <table class="subtable">
            <tr class="monthDisplay"></tr>
            <tr class="tableRow1">
                <tr></tr>
                <tr></tr>
                <tr></tr>
                <tr></tr>
                <tr>The problematic row after which the line appears</tr>
                <td class="problematicColumn"> //It seems that these columns also add some height
                    <tr>Jan 9, 2024</tr>
                    <tr>$214.41</tr>
                    <tr>$214.01</tr>
                    <tr>$6.61</tr>
                    <tr></tr>
                </td>
                <td>
                    <tr></tr>
                    <tr></tr>
                    <tr></tr>
                    <tr></tr>
                    <tr></tr>
                </td>
                ... 
            </tr>
            <tr class="tableRow2">
                <tr></tr>
                <tr></tr>
                <td></td>
                <td></td>
                ...
            </tr>
            <tr class="tableRow3">
                <tr></tr>
                <td></td>
                <td></td>
            </tr>
        </table>
    </table>
</body>
</html>

附上问题截图（已移除特定数据，红色箭头指向需移除的空白）：

以下是我在HTML检查器中高亮problematicColumn的截图：

请问有什么方法可以干净地移除该空白区域？

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