Question

我试图使代码生成下面的图像，但似乎有些东西与我的表宽度...任何修复？我仍然是HTML的n00b，感谢一百万！将upvote并接受解决我的问题的解决方案100％

Image of expected result

代码表：

     <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 enter image description here

正如您所看到的，Postanschrift和Telefon之前的缩进工作得很好......但是后面的列宽不再像“预期结果”的图像那样固定

编辑1：使用WebDevNewbie的代码片段，结果如下：

enter image description here

Answer 1

<table>中的样式标签不完整，并且用宽度固定表格就是将它们拼凑在一起。删除table-layout: fixed解决了大部分问题，而且由于空格的原因，我也不得不加宽短信/彩信<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>代码，并进行格式化以便于阅读..

设置固定宽度表，在HTML页面上改变文本长度

1 个答案: