Invisible spacing / white-space

This is driving me crazy because it happens sometimes and not others but i’ve got a table with only 3 rows and one <td> per row. In each cell there is a gap or white space that I would like to minimize or get rid of. Ive set margin/padding to 0px on the table but it only appears to have “0” margins on left and right but not top and bottom where it matters to me in this instance.

this is the table html:

<table class="ayah" width="100%">
<tr>
<td class="arabic">arabic</td>
</tr>
<tr>
<td class="translit">transliteration</td>
</tr>
<tr>
<td class="english">english</td>
</tr>
</table>

table css:

table.ayah {
        position: static;
        top: -25px;
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
        spacing: 0px 0px 0px 0px;
        width: 100%;
        border-width: 1px;
        border-padding: 0px;
        border-spacing: 0px;
        border-style: solid;
        border-color: #111111;
        border-collapse: separate;
        background-color: #fbfbfb;
}

table.ayah th {
    border-width: 0px;
    padding: 1px;
    border-style: none;
    border-color: #fbfbfb;
    background-color: #fbfbfb;
    -moz-border-radius: 0px 0px 0px 0px;
}
table.ayah td {
        width: 100%;
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
        border-width: 1px;
        border-padding: 0px;
        border-spacing: 0px;
        border-style: solid;
        border-color: #111111;
        background-color: #fbfbfb;
        -moz-border-radius: 0px 0px 0px 0px;
}

note, i am not using <th> but it’s there if i decide to use it.

and some other minor css:

td.arabic {
text-align: right;
}

td.english {
text-align: left;
}

td.translit {
text-align: left;
}

I have no idea what the issue is. It wasn’t doing it when i had my basic table with no classes. Again, the margin or padding does seem to be working on the left and right ends but not on top and bottoms for some reason. Your help is appreciated.