2

firefox と IE でテーブルを使用して配置の問題を把握できません。フィドルは完全な問題を適切に表示しますhttp://jsfiddle.net/qfDB9/適切な高さと幅を提供した後でも、問題は解決しません。私がテーブルを作成した実際の理由は、Chrome では完全に示されていますが、IE と Firefox では配置の問題があります。

CSS:

table tr #number_table {
    width:50px;
    height:50px;
    text-align:center;
    font-size:50px;
}
table tr #photo_table {
    width:150px;
    height:100%;
    text-align:center;
}
table tr #description_table {
    width:400px;
    padding-bottom:2em;
    font-size:20px;
}
table tr #band_name {
    text-align:center;
    height:25px;
}

HTML :

<table border="1" cellpadding="0" cellspacing="5"  width="600px" style="color:#000;">
<tr>
    <td id="number_table">1</td>
    <td rowspan="2" id="photo_table"><a href="http://upload.wikimedia.org/wikipedia/commons/d/df/The_Fabs.JPG" target="_blank"><img src="http://upload.wikimedia.org/wikipedia/commons/d/df/The_Fabs.JPG" width="140px" height="140px"/></a></td>
    <td rowspan="4" id="description_table">something something <br><br><br><br>something something <br><br><br><br>something something <br><br><br><br>something something <br><br><br><br></td>
</tr>
<tr>
    <td rowspan="3"></td>
</tr>
<tr>
     <td id="band_name">Something</td>
</tr>
</table>

これを解決する方法はありますか。

4

3 に答える 3

2

<tr>タグ内のコンテンツを垂直方向に揃える必要があります

table tr { vertical-align:top; }

デモを見る

div'sまた、代わりに使用することを検討する必要があることを付け加えるかもしれませんtables

于 2013-09-17T13:56:56.610 に答える
0

【解決済み】こちらをご覧ください。またはに追加valign="top"するだけです<tr><td>

デモはこちら: http://jsfiddle.net/qfDB9/9/

于 2013-09-17T14:01:43.190 に答える