2

コードが下の画像を生成するようにしようとしていますが、テーブルの幅に何か問題があるようです...何か修正はありますか? 私はまだ HTML の初心者です。私の問題を100％解決する解決策に賛成票を投じて受け入れます

期待される結果のイメージ

テーブルのコード:

     <table  style="table-layout: fixed width="100%" cellspacing="0" cellpadding="2"><tr>

        <td colspan="1" width="250"></td>
        <td colspan="2" width="10"><span>Postanschrift</span></td>
    <td colspan="3" width="5"><input type="radio" value="F" <span>&#160;Nein&#160;</span></td>
    <td colspan="2" width="5"><input type="radio" value="F" <span>&#160;Ja</span></td>
        <td colspan="1" width="15"></td>
    <td colspan="2" width="10"><span>SMS / MMS</span></td>
    <td colspan="3" width="5"><input type="radio" value="F" <span>&#160;Nein&#160;</span></td>
    <td colspan="2" width="5"><input type="radio" value="F" <span>&#160;Ja</span></td>

 </table>
 <table  style="table-layout: fixed width="100%" cellspacing="0" cellpadding="2"><tr>

        <td colspan="1" width="250"></td>
        <td colspan="2" width="10"><span>Telefon</span></td>
    <td colspan="3" width="5"><input type="radio" value="F" <span>&#160;Nein&#160;</span></td>
    <td colspan="2" width="5"><input type="radio" value="F" <span>&#160;Ja</span></td>
        <td colspan="1" width="15"></td>
    <td colspan="2" width="10"><span>E-Mail</span></td>
    <td colspan="3" width="5"><input type="radio" value="F" <span>&#160;Nein&#160;</span></td>
    <td colspan="2" width="5"><input type="radio" value="F" <span>&#160;Ja</span></td>          
 </table>

これは、予想されるコードの結果のイメージです...かなりめちゃくちゃです:Sここに画像の説明を入力

ご覧のとおり、Postanschrift と Telefon の前のインデントは問題なく機能しますが、後の列幅は、「期待される結果」の画像のように固定されなくなりました。

編集 1: WebDevNewbie のコード スニペットを使用すると、結果は次のようになります。

ここに画像の説明を入力

4

1 に答える 1

2

のスタイルタグ<table>は完全ではありませんでした。テーブルを幅で固定することが、すべてをまとめて押しつぶしているのです。ほとんどの場合、それを削除するとtable-layout: fixed解決しました。また、スペースのためにSMS / MMSを広げる<td>必要があり、別の行にプッシュされていました。

それらすべての幅を変更することは良い賭けでしょう。

<table style="width:100%; table-layout: fixed;" cellspacing="0" cellpadding="2">
    <tr>
        <td width="100%" style="background-color: #EEEEEE;"></td>        
        <td width="100px">
            <span>Postanschrift</span>
        </td>
        <td width="60px" style="background-color: #EEEEEE;">
            <input type="radio" value="F"/>
            <span>&#160;Nein&#160;</span>
        </td>
        <td width="40px">
            <input type="radio" value="F"/>
            <span>&#160;Ja</span>
        </td>
        <td width="30px" style="background-color: #EEEEEE;"></td>
        <td width="100px">
            <span>SMS / MMS</span>
        </td>
        <td width="60px" style="background-color: #EEEEEE;">
            <input type="radio" value="F"/>
            <span>&#160;Nein&#160;</span>
        </td>
        <td width="45px">
            <input type="radio" value="F"/>
            <span>&#160;Ja</span>
        </td>
    </tr>
</table>

編集：また、colspansこの場合、すべてが必要ではありませんでした。これらは、<td>複数の列にまたがる場合ですが、ここでは必要ありません。そこにある必要のない空のセルもあります...

編集：なぜあなたがその空白のセル、スペーサーを使用しているのかわかります。テーブルを更新しました。最初のセルの幅は100％になりました。これにより拡張が可能になり、他の幅を増やしました。

編集：<input>タグを閉じ、読みやすくするためにフォーマットしました。

于 2012-08-03T18:51:10.337 に答える