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

我想让代码生成下面的图片，但它似乎有些东西与我的表格宽度关闭...任何修复？我仍然是HTML上的n00b，谢谢！将给予好评和接受，解决我的问题100％设置固定宽度的表格，在HTML页面上改变文本长度

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的代码片段，这里的结果：在<table>

enter image description here

来源

2012-08-03 bouncingHippo

Style标签是不完整的，并且使你的桌子固定的宽度是什么是粉碎它一起。删除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>标签，并格式化为可读性..

来源

2012-08-03 18:51:10 WebDevNewbie

我该如何缩小Nein和Ja之间的距离？此外，短信/彩信似乎是用你的代码包装...将现在张贴图像.. – bouncingHippo 2012-08-03 18:55:27

我已更新表.. 如果你想让它们更接近，你可以把它们放在相同的''，只需增加''的宽度，以允许额外的空间。你也可以增加你在那里的间隔物''的宽度和其他''的witdh的宽度，以使他们看起来更接近。我还添加了颜色以更清晰地查看单元格。 – WebDevNewbie 2012-08-03 19:03:16

感谢百万老兄，它的作品就像一个魅力！ – bouncingHippo 2012-08-03 19:08:28

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

回答

相关问题