Question

迭代列表以在页面上创建字段集。最后一个字段集位于左下角，它看起来很疯狂我可以对我的布局做些什么来使这些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;


}

Answer 1

如果您希望在不同的表格列<fieldset>中将所有<td>放在一个表格行<td>中，那么您应该将每一个<td>放在它自己的 <table class="data_table" width="100%"> <tr> <th colspan="${fn:length(detFieldMap)}"> <span onclick="toggleDiv('displayFields', 'displayImg')" style="cursor: hand;">Data Fields <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);"/>      <input type="button" name="clear_choice" value="Uncheck All" onclick="checkUncheck(false);"/> </td> </tr> </table>。这样就可以维护表格布局。

E.g。

<tr>

请注意，我还修复了将<td>嵌套为{{1}}的直接子项的无效HTML。使用http://validator.w3.org自行确定HTML语法错误。

HTML--在页面上给字段设置一些结构

1 个答案: