HTML--授予fieldSets頁面

的某種結構Im遍歷列表以在頁面上創建字段集。最後一個字段集在左下角，它看起來很瘋狂有什麼我可以做我的佈局，使這些fieldSets在頁面上看起來不錯？HTML--授予fieldSets頁面

enter image description here

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; 


}

來源

2012-02-13 Doc Holiday

確實含糊不清。您可以像使用其他任何元素一樣使用CSS來設置字段集。 – Scott 2012-02-13 19:35:30

「看起來像樣」是含糊不清和主觀的。你究竟想要它看起來像什麼？ – j08691 2012-02-13 19:36:09

你會如何讓他們看起來像那樣？請注意，您的HTML表格語法無效。你不能有''作爲''的直接子。 – BalusC 2012-02-13 19:36:55

如果你想擁有所有<fieldset> S IN單錶行<td>彼此相鄰的不同表中的列<td> s，那麼你應該把自己的每一個<td>。這種方式維護了表格佈局。

E.g.

<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>

請注意，我也修正了自己的嵌套一個<tr>爲<td>的直接孩子的無效HTML。使用http://validator.w3.org來自己確定HTML語法錯誤。

來源

2012-02-13 19:44:18 BalusC

BalusC ...你是一個甲骨文或什麼？ – 2012-02-13 19:47:07

BalusC我仍然需要他們的頂部的Onclick div div – 2012-02-13 19:53:39

哦，將它分配給''。我已經解決了答案。 – BalusC 2012-02-13 19:56:47

HTML--授予fieldSets頁面

回答

相關問題