表格在Firefox中的呈现方式与Chrome或Opera不同

Question

我正在研究一个新的Tumblr主题，我在音频帖子上遇到了麻烦。我把信息放到一个表中，但是在Firefox和其他浏览器中，表的呈现方式却截然不同。我在这里有代码：

http://jsbin.com/iseqab/1

我希望元数据信息可以在专辑封面旁边居中，或者在旁边均匀分布。只是看起来不错的东西。 chrome使得最后一个框（播放）占据了剩下的空间。 firefox给每个表行甚至空间顶部和底部。如何在浏览器之间获得一致的外观？

这是一张显示我的意思的图片：

Answer 1

Use nested table in staid of rowspan as below. 

<table cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td><table cellpadding="0" cellspacing="0">
          <tr>
            <td><div class="glass" style="height:212px"> <img class="album" alt="album" src="Album%20Art%20Tumblr_files/tumblr_mp65f3F1nG1sxmxz6o1_1372533231_cover.jpg"> </div>
              <div id="audioplayer"> <span id="audio_player_54198232780">
                <div class="audio_player">
                  <iframe class="tumblr_audio_player tumblr_audio_player_54198232780" src="Album%20Art%20Tumblr_files/tumblr_mp65f3F1nG1sxmxz6.htm" allowtransparency="true" style="-webkit-transform: translate3d(0px, 0px, 0px);" frameborder="0" height="27" scrolling="no" width="207"> </iframe>
                </div>
                </span> </div></td>
          </tr>
        </table></td>
      <td align="left"><table cellpadding="0" cellspacing="0">
          <tr>
            <td><table cellpadding="0" cellspacing="0">
                <tbody>
                  <tr>
                    <th>Artist:</th>
                    <td>Julandrew</td>
                  </tr>
                  <tr>
                    <th>Album:</th>
                    <td>Songs To Dream By</td>
                  </tr>
                  <tr>
                    <th>Song:</th>
                    <td>Wait-a-little-longer</td>
                  </tr>
                  <tr>
                    <th>Plays:</th>
                    <td>4</td>
                  </tr>
                </tbody>
              </table></td>
          </tr>
        </table></td>
    </tr>
  </tbody>
</table>