Html 行跨度较大的行具有较大的高度

我正在构建这个html表：

<div class="parser-table-wrapper">
    <table class="parser-table">
        <thead>
            <tr>
                <th>Category</th>
                <th>Value</th>
                <th>Id</th>
                <th>Number</th>
            </tr>
        </thead>
        <tbody id="tbody-filter-market-country-specialty">
            <tr class="parser-row">
                <th rowspan="6">1</th>
                <td class="parser-value-cell table-value-cell">a</td>
                <td class="parser-value-cell table-value-cell">a1</td>
                <td class="parser-value-cell table-value-cell">1</td>
            </tr>
            <tr class="parser-row">
                <td class="parser-value-cell table-value-cell">b</td>
                <td class="parser-value-cell table-value-cell">b1</td>
                <td class="parser-value-cell table-value-cell">2</td>
            </tr>
            <tr class="parser-row">
                <td class="parser-value-cell table-value-cell">c</td>
                <td class="parser-value-cell table-value-cell">c1</td>
                <td class="parser-value-cell table-value-cell">3</td>
            </tr>
            <tr class="parser-row">
                <td class="parser-value-cell table-value-cell">d</td>
                <td class="parser-value-cell table-value-cell">d1</td>
                <td class="parser-value-cell table-value-cell">4</td>
            </tr>
            <tr class="parser-row">
                <td class="parser-value-cell table-value-cell">e</td>
                <td class="parser-value-cell table-value-cell">e1</td>
                <td class="parser-value-cell table-value-cell">5</td>
            </tr>
            <tr class="parser-row last-value-row">
                <td class="parser-value-cell table-value-cell">f</td>
                <td class="parser-value-cell table-value-cell">f1</td>
                <td class="parser-value-cell table-value-cell">6</td>
            </tr>
            <tr class="parser-row">
                <th rowspan="2">2</th>
                <td class="parser-value-cell table-value-cell">a</td>
                <td class="parser-value-cell table-value-cell">a1</td>
                <td class="parser-value-cell table-value-cell">1</td>
            </tr>
            <tr class="parser-row last-value-row">
                <td class="parser-value-cell table-value-cell">b</td>
                <td class="parser-value-cell table-value-cell">b1</td>
                <td class="parser-value-cell table-value-cell">2</td>
            </tr>
            <tr class="parser-row">
                <th rowspan="2">3</th>
                <td class="parser-value-cell table-value-cell">a</td>
                <td class="parser-value-cell table-value-cell">a1</td>
                <td class="parser-value-cell table-value-cell">1</td>
            </tr>
            <tr class="parser-row last-value-row">
                <td class="parser-value-cell table-value-cell">b</td>
                <td class="parser-value-cell table-value-cell">b1</td>
                <td class="parser-value-cell table-value-cell">1</td>
            </tr>
            <tr class="parser-row">
                <th rowspan="2">4</th>
                <td class="parser-value-cell table-value-cell">a</td>
                <td class="parser-value-cell table-value-cell">a1</td>
                <td class="parser-value-cell table-value-cell">1</td>
            </tr>
            <tr class="parser-row last-value-row">
                <td class="parser-value-cell table-value-cell">b</td>
                <td class="parser-value-cell table-value-cell">b1</td>
                <td class="parser-value-cell table-value-cell">2</td>
            </tr>
        </tbody>
    </table>
</div>

我希望所有行都具有相同的高度，但似乎每个类别的第一行（包含带有rowspan属性的th的行）会额外增加0.8px，即使我将高度设置为特定值。有没有办法解决这个问题

以下是JSFIDLE：

---

编辑：似乎是在tr中添加边框，而表格的

边框折叠

样式会影响行高。知道如何添加这些边框而不影响行高吗？

我不知道您指的是哪一行有额外的高度。每个类别的第一行。parser-table-wrapper table tbody。最后一个值行{border bottom:1px solid#cdcdcdcd；}---此边框导致行高不一致。@CharleneVas，这似乎不会导致第一行更改。当我用chrome元素选择器将鼠标悬停在它上面时，它显示33px高，下面的一个显示32。。。即使是那句话out@MichaelMcQuade一旦该边框被注释掉，它在两行上都显示为32px。我正在使用chrome开发工具检查元素。我看不出您指的是哪一行有额外的高度。每个类别的第一行。parser-table-wrapper-table-tbody。最后一个值行{border bottom:1px solid 35; cdcdcdcd；}---此边框导致行高不一致。@CharleneVas，这似乎不会导致第一行更改。当我用chrome元素选择器将鼠标悬停在它上面时，它显示33px高，下面的一个显示32。。。即使是那句话out@MichaelMcQuade一旦该边框被注释掉，它在两行上都显示为32px。我正在使用chrome开发工具检查元素。

body {
  font-family: "lato",Arial,sans-serif;
  color: rgba(0,0,0,0.84);
  font-weight: 400;
  line-height: 1.4em;
}

.parser-table-wrapper {
     border: 1px solid #9e9e9e;
     border-radius: 2px;
     margin: 18px 10% 12px 10%;
     overflow-x: auto;
}
 .parser-table-wrapper table {
     width: 100%;
     border-radius: 3px;
     box-shadow: 1px 1px 1px #9e9e9e;
}
 .parser-table-wrapper table th, .parser-table-wrapper table td {
     border-bottom: 0px;
     font-size: 15px;
     line-height: 1.25;
     min-width: 30px;
     max-width: 120px;
     text-align: left;
}
 .parser-table-wrapper table th {
     padding: 6px;
     background-color: #dcdcdc;
}
 .parser-table-wrapper table td.table-value-cell {
     height: 30.4px;
     padding-left: 6px;
}
 .parser-table-wrapper table tbody tr th {
     background-color: #fff;
     border-bottom: 1px solid #cdcdcd;
}
 .parser-table-wrapper table tbody tr:nth-child(even) td {
     background-color: #efefef;
}
 .parser-table-wrapper table tbody .last-value-row {
     border-bottom: 1px solid #cdcdcd;
}
 .parser-table-wrapper table tfoot {
     background-color: #e2e2e2;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

tbody {
    border-top: 1px solid #ccc;
}