HTML--フィールドにページを設定する

Question

リストを反復してページにフィールドセットを作成する。最後のフィールドセットは左下にあり、狂っているようです。これらのフィールドセットをページ上でうまく見せるために、レイアウトに何かできることはありますか？

HTML：

<table width="100%"> 
<tr> 

    <td width="50%" align="center"> 

    </td> 
</tr> 

</table> 

    <table class="data_table" width="100%"> 

    <tr> 
     <th> 
      <span onclick="toggleDiv('displayFields', 'displayImg')" style="cursor: hand;">Data Fields&nbsp;<img name="displayImg" src="../images/minus.gif" /></span> 
     </th> 

    </tr> 

    <tr> 
     <td> 


      <div id="displayFields" style="display:block;"> 

       <c:forEach items="${detFieldMap}" var="detFieldEntry">  
        <fieldset class="det">   
         <legend>${detFieldEntry.key}</legend> 

          <c:forEach items="${detFieldEntry.value}" var="detBean">    
          <input type="checkbox" name="fieldNames" value="${detBean.fieldName}">${detBean.displayName}</input>    
           </br>  
      </c:forEach>  
      </fieldset> 
      </c:forEach> 

      </div> 
      <tr> 
      <td style="text-align: center;"> 
      <input type="button" name="clear_choice" value="Check All" onclick="checkUncheck(true);"/> 
      &nbsp;&nbsp;&nbsp;&nbsp; 
      <input type="button" name="clear_choice" value="Uncheck All" onclick="checkUncheck(false);"/> 

      </td> 
      </tr> 

     </td> 
     </tr> 

</table> 

はCSS：

/*css. */ 
table.det 
{ 
} 

table.det td 
{ 
border: none; 

} 
/* This groups small (16x16) icons using a border and a label. */ 
fieldset.det 
{  
display:block; 
float:left; 

font-family:Verdana, Arial, Helvetica, sans-serif; 
font-size:12px; 
margin-top:20px; 
margin-left:20px; 
border:2px solid #CCCCCC; 

} 
fieldset.det legend 
{ 
    padding:2px 5px; 
    border:2px solid #CCCCCC; 
    font-weight: bold; 


} 

Answer 1

ますが、別のテーブルの列にお互いに次のシングルテーブル行<td>内のすべての<fieldset> Sを持つようにしたい場合は<td>それでは、それぞれをに入れてください。<td>。このようにして、テーブルレイアウトが維持されます。

など。私も<td>の直接の子として<tr>をネストのあなたの無効なHTMLを固定

<table class="data_table" width="100%"> 
    <tr> 
     <th colspan="${fn:length(detFieldMap)}"> 
      <span onclick="toggleDiv('displayFields', 'displayImg')" style="cursor: hand;">Data Fields&nbsp;<img name="displayImg" src="../images/minus.gif" /></span> 
     </th> 
    </tr> 
    <tr id="displayFields"> 
     <c:forEach items="${detFieldMap}" var="detFieldEntry">  
      <td> 
       <fieldset class="det">   
        <legend>${detFieldEntry.key}</legend> 
        <c:forEach items="${detFieldEntry.value}" var="detBean">    
         <input type="checkbox" name="fieldNames" value="${detBean.fieldName}">${detBean.displayName}</input>    
         </br>  
        </c:forEach>  
       </fieldset> 
      </td> 
     </c:forEach> 
    </tr> 
    <tr> 
     <td colspan="${fn:length(detFieldMap)}" style="text-align: center;"> 
      <input type="button" name="clear_choice" value="Check All" onclick="checkUncheck(true);"/> 
      &nbsp;&nbsp;&nbsp;&nbsp; 
      <input type="button" name="clear_choice" value="Uncheck All" onclick="checkUncheck(false);"/> 
     </td> 
    </tr> 
</table> 

注意。 http://validator.w3.orgを使用すると、HTML構文エラーを自分で解決できます。