0

HTML テーブルを使用して請求書を作成しようとしています。しかし、私が直面している問題は、値customer addressが非常に長い場合、次の列sold byが下に移動することです。最大幅に達したとき</br>の値を破りたいが、列には影響を与えません。これが私の次のコードのライブデモです:customer addresssold by

この問題を解決するのを手伝ってくれませんか?

ありがとう：）

私のHTML

<table width="100%" id="info"  align="center">
<tr>
<td class="item-left">Invoice# </td><td width="35%">: INV-PC-2012-000001</td>
<td class="">Date</td><td>: 2012-08-30</td>
</tr>

<tr>
<td class="item-left">Customer Name</td><td>: Charlie Sheen</td>
<td class="">Time</td><td>: 6:46:49 PM</td>
</tr>

<tr>
 <td class="item-left">Customer Address</td><td class="customer_addr">:Long Address Long Address Long Address Long Address Long Address</td>
<td class="">Sold By</td><td>: John Cryer</td>
</tr>​
</table>

CSS

body {font-size:75%;color:#222; font-family: Geneva, Arial, Helvetica, sans-serif;  }
#info { clear: both; width: 100%; margin: 30px 0 0 0; table-layout: fixed;border-collapse: collapse; }
#info table { }
#info td{ padding-top: .3em;padding-bottom: .3em;}
#info td.item-left { width: 150px; }​
4

1 に答える 1

1

私があなたを正しく理解しているなら、あなたは実際の列の高さではなく、テキストの垂直位置の変化について心配しています。その場合は、これを試してください。

#info td{ padding-top: .3em;padding-bottom: .3em;vertical-align:top;}

フィドル

于 2012-08-30T03:57:17.753 に答える