HTML表格单元出现故障时，添加文本

Question

我有这样的一个表：

<table class="rds" cellspacing="15px"> 
    <tr> 
     <td id="r1"><a id="rx1" href="#"></a></td> 
     <td id="r2"><a id="rx2" href="#"></a></td> 
     <td id="r3"><a id="rx3" href="#"></a></td> 
     <td id="r4"><a id="rx4" href="#"></a></td> 
    </tr> 
</table> 

和CSS文件：

.rds { 
    width: auto; 
    margin-left:auto; 
    margin-right:auto; 
} 

.rds tr td a:link, .rds tr td a:visited { 
    display: block; 
    width: 39px; 
    height: 39px; 
    background-image: url('images/bg.png'); 
    background-repeat: no-repeat; 
    background-position: center; 
} 

.rds tr td a:active, .rds tr td a:hover { 
    display: block; 
    width: 39px; 
    height: 39px; 
    background-image: url('images/bg.png'); 
    background-repeat: no-repeat; 
    background-position: center; 
    opacity: 0.9; 
} 

但是当我添加一些文字标签，所有细胞下降一位。只有带有文本的单元格会关闭。

我该怎么办？

Answer 1

在所有单元上使用vertical-align="top"。在CSS中，它可能看起来像

td { 
    vertical-align:top; 
}