HTMLのテーブルデータの一部を固定しかつ一部をフレキシブルにしたいの

質問

HTMLのテーブルデータの一部を固定しかつ一部をフレキシブルにしたいのですがどのようにしたらいいでしょうか？

画像のようにやりたいのですが・・・
一番左端は10pxで固定します。
Xのテーブルデータはいれる文字列の長さによってフレキシブルにします。
Yは画像を入れるのですがXの文字列とすぐ隣合うようにしたいのです。
その横の140ｐｘと20ｐｘのデータは完全に固定として上から下の行までまっすぐに通したいのです
どのようにしたらいいでしょうか？

回答No.1

naokita · ベストアンサー

可能だけど現実的には無理だね。
10＋140＋20＝170px確定。
300pxまでの残りの130pxをXとYで分けるのだから、
X,Yのマックス幅 130px内で可変なんてしてもしょうがない・・・
画像が大きい場合や文章が長い場合は、崩壊する。
そもそもテーブルで作るのが・・・

<table border="1" style="width:300px;">
<tr>
<td style="width: 10px; font-size:10px;">a</td>
<td>X</td><td>Y</td>
<td style="width: 140px;">140px</td>
<td style="width: 20px;">20</td>
</tr>
<tr><td>b</td><td>bX</td><td>bY</td><td>b140</td><td>　</td></tr>
</table>

それとも、XYのセルをつなげて、
<table border="1" style="width:300px;">
<tr>
<td style="width: 10px; font-size:10px;">a</td>
<td>X<img src="Y.gif" width="50" height="20" alt="Y" style="float:right;" /></td>
<td style="width: 140px;">140px</td>
<td style="width: 20px;">20</td>
</tr>
<tr><td>b</td>
<td>bX<img src="Y2.gif" width="50" height="20" alt="Y" style="float:right;" /></td>
<td>b140</td><td>　</td></tr>
</table>

お礼

ありがとうございました