確保我所有的表格內容都是垂直對齊的？

我無法讓我的桌子內容垂直對齊，並想知道如果你可以幫助，我添加了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/

來源

2012-03-29 styler

刪除float從您的TD。這樣寫吧

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

來源

2012-03-29 09:48:14 sandeep

如果設置爲vertical-align: top你td會看到相同的對齊還對IE7（我假設你想上對齊，因爲在IE7細胞中間對齊）

至於一旁註意，您可以避免分配float: left爲你的細胞，它沒有任何效果）

來源

2012-03-29 09:47:48 fcalderan

確保我所有的表格內容都是垂直對齊的？

回答

相關問題