我无法让我的桌子内容垂直对齐,并想知道如果你可以帮助,我添加了border-collapse:折叠并给出了我的边框,以便表格样式在IE7中正常工作,如果任何人有任何关于如何我可以产生一致的表格布局,这将是非常棒的。顺便说一句,我使用的表格,因为这个内容是值得一桌。确保我所有的表格内容都是垂直对齐的?
CSS
#myTable{width:810px;margin:0 auto;border-top:1px solid #f00;height:200px;overflow:auto;border-collapse:collapse;}
#myTable tr{padding-right:0;margin-right:0;display:block;}
#myTable td{float:left;border-bottom:1px solid #f00;padding-right:0;margin:0;font-size:16px;height:50px;padding:10px 0}
#myTable .title{width:199px;}
#myTable .description{width:481px;color:#ffc500;}
#myTable .description a{color:#ffc500;}
#myTable .logo{width:127px;text-align:right;}
#myTable .logo a{display:block;line-height:0;vertical-align:middle}
#myTable .logo img{vertical-align:middle;}
HTML
<table id="myTable">
<tbody>
<tr>
<td class="title">Title</td>
<td class="description"><a href="#">Lorem ipsum sit amet dolar</a></td>
<td class="logo"><img src="http://dummyimage.com/130x50/000/fff" width="130" height="50" /></td>
</tr>
<tr>
<td class="title">Title</td>
<td class="description"><a href="#">Lorem ipsum sit amet dolar</a></td>
<td class="logo"><img src="http://dummyimage.com/130x50/000/fff" width="130" height="50" /></td>
</tr>
<tr>
<td class="title"></td>
<td class="description"><a href="#">Lorem ipsum sit amet dolar</a></td>
<td class="logo"><img src="http://dummyimage.com/130x50/000/fff" width="130" height="50" /></td>
</tr>
<tr>
<td class="title">Title</td>
<td class="description"><a href="#">Lorem ipsum sit amet dolar</a></td>
<td class="logo"><img src="http://dummyimage.com/130x50/000/fff" width="130" height="50" /></td>
</tr>
</tbody>
</table>
这里是我的小提琴链接:http://jsfiddle.net/EEwvG/1/