CSS：为什么在td和div之间出现间隙？

Question

在我制作的表格中，每当一个单元格只有一点内容时，td和div之间就会出现间隙 - 但是，当里面有很多东西时，看起来很正常。这看起来很奇怪。有人可以帮我删除吗？

html：

<td cod='[@cod]'>
<div class="headler">
    [@inicio] - [@fim]
</div>
<div class="valores_resultados">

    <div class="disciplina" cod="[@cod_disciplina]">
        [@disciplina]
    </div>
    <br>
    <div class="professor" cod="[@cod_prof]">
        [@professor]
    </div>
</div>

的CSS：

table { 
    border-spacing: 10px;;
    border-collapse: separate;
    width: 100%;
}

tr, td, th { 
    border: #000 solid 1px;
    -webkit-box-shadow: 3px 2px 0px 0px rgba(0, 0, 0, 0.45);
    -moz-box-shadow:    3px 2px 0px 0px rgba(0, 0, 0, 0.45);
    box-shadow:         3px 2px 0px 0px rgba(0, 0, 0, 0.45);

}

td:hover {
    border: rgb(80, 0, 0) solid 1px;
    cursor:pointer;
    -webkit-box-shadow: 3px 2px 0px 0px rgba(80, 0, 0, 0.45);
    -moz-box-shadow:    3px 2px 0px 0px rgba(80, 0, 0, 0.45);
    box-shadow:         3px 2px 0px 0px rgba(80, 0, 0, 0.45);
}

.headler {
    background-color: rgb(145, 0, 0);
    text-align: center; 
    padding: 4% 0%; 
    margin: 0;
}

.valores_resultados{
    min-height: 60px; 
    text-align: center;
}

.disciplina {
    margin-top: 3%;
}

.professor {
    margin-bottom: 4%;
}

Answer 1

将CSS更改为：

table {
    border-collapse: collapse;
}

Answer 2

添加：

tr, td, th {vertical-align:top;}