html - 具有行跨度的行具有更大的高度

Question

我正在构建这个 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>

使用以下CSS：

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;
}

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

这是jsfiddle：https ://jsfiddle.net/89x0j6a4/

编辑：似乎为 tr 添加边框并且border-collapse表格的样式会影响行高。知道如何在不影响行高的情况下添加这些边框吗？

标签： htmlcsshtml-table