2

我正在尝试使代码生成下面的图像，但我的表格宽度似乎有些问题......有什么修复吗？我仍然是 HTML 的 n00b，谢谢一百万！将投票并接受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大部分解决了它，而且<td>由于空格，我还不得不加宽 SMS / MMS，它将它们推到不同的行。

更改所有这些的宽度将是一个不错的选择。

<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在这种情况下不需要所有这些。如果您希望 a<td>跨越多个列，则这些是不需要的。还有一个不需要的空单元格......

编辑：我明白你为什么使用那个空白单元格，一个垫片。我已经更新了表格，第一个单元格现在的宽度为 100%，这将允许扩展，并且我增加了其他宽度..

编辑：关闭<input>标签，并格式化以提高可读性..

于 2012-08-03T18:51:10.337 回答