确保我的所有表格内容都垂直对齐?

时间:2012-03-29 09:43:27

标签: html css

我无法使我的桌面内容垂直对齐,并且想知道你是否可以提供帮助,我添加了边框折叠:折叠到并给出我的边框,以便桌面样式在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/

2 个答案:

答案 0 :(得分:1)

如果为vertical-align: top设置td,您将在IE7上看到相同的对齐方式(我假设您需要顶部对齐,因为在IE7单元格中间对齐)

除非注意,您可以避免为您的单元格指定float: left,但它没有效果。

答案 1 :(得分:1)

float删除TD。像这样写

#myTable td {
    border-bottom: 1px solid #FF0000;
    vertical-align:middle;
    font-size: 16px;
    height: 50px;
    margin: 0;
    padding: 10px 0;
}