一、很久没做前端了,突然接了一个项目,需要改前端UI的。页面是jsp的,没有前端框架,jQuery也咩怎么用。然后有个需求是两个表需要并排显示,并且中间隔开一段距离的,居然忘记要怎么做了,最后求助下度娘,发现也是很简单的一件事,只是很久没做了所以想不起来了。
二、解决方法:把两个table放到一个大的table里面的就可以了。代码如下:
<table>
<tr>
<td>
<table border="1" cellspacing="0" cellpadding="3">
<tr>
<td>Brand</td>
<td align="center" colspan="4">1010</td>
<td align="center" colspan="4">csl.</td>
</tr>
<tr>
<td>Split %</td>
<td align="center" colspan="4"><input name="base1010Split" type="text" value="<%=StringFunc.html2String(stockAllocate2Func.getFieldValue("base1010Split"))%>" maxlength="3" οnkeydοwn="return numberOnly();"></td>
<td align="center" colspan="4"><input name="baseCslSplit" type="text" value="<%=StringFunc.html2String(stockAllocate2Func.getFieldValue("baseCslSplit"))%>" maxlength="3" οnkeydοwn="return numberOnly();"></td>
</tr>
<tr>
<td>Queue</td>
<td>EB</td>
<td>NEW</td>
<td>CE</td>
<td>FTG</td>
<td>EB</td>
<td>NEW</td>
<td>CE</td>
<td>FTG</td>
</tr>
<tr>
<td>Split %</td>
<td><input name="base1010EB" type="text" value="<%=StringFunc.html2String(stockAllocate2Func.getFieldValue("base1010EB"))%>" maxlength="3" size="6" οnchange="return calcBaseTotal();" οnkeydοwn="return numberOnly();"></td>
<td><input name="base1010NEW" type="text" value="<%=StringFunc.html2String(stockAllocate2Func.getFieldValue("base1010NEW"))%>" maxlength="3" size="6" οnchange="return calcBaseTotal();" οnkeydοwn="return numberOnly();"></td>
<td><input name="base1010CE" type="text" value="<%=StringFunc.html2String(stockAllocate2Func.getFieldValue("base1010CE"))%>" maxlength="3" size="6" οnchange="return calcBaseTotal();" οnkeydοwn="return numberOnly();"></td>
<td><input name="base1010FTG" type="text" value="<%=StringFunc.html2String(stockAllocate2Func.getFieldValue("base1010FTG"))%>" maxlength="3" size="6" οnchange="return calcBaseTotal();" οnkeydοwn="return numberOnly();"></td>
<td><input name="baseCslEB" type="text" value="<%=StringFunc.html2String(stockAllocate2Func.getFieldValue("baseCslEB"))%>" maxlength="3" size="6" οnchange="return calcBaseTotal();" οnkeydοwn="return numberOnly();"></td>
<td><input name="baseCslNEW" type="text" value="<%=StringFunc.html2String(stockAllocate2Func.getFieldValue("baseCslNEW"))%>" maxlength="3" size="6" οnchange="return calcBaseTotal();" οnkeydοwn="return numberOnly();"></td>
<td><input name="baseCslCE" type="text" value="<%=StringFunc.html2String(stockAllocate2Func.getFieldValue("baseCslCE"))%>" maxlength="3" size="6" οnchange="return calcBaseTotal();" οnkeydοwn="return numberOnly();"></td>
<td><input name="baseCslFTG" type="text" value="<%=StringFunc.html2String(stockAllocate2Func.getFieldValue("baseCslFTG"))%>" maxlength="3" size="6" οnchange="return calcBaseTotal();" οnkeydοwn="return numberOnly();"></td>
</tr>
<tr>
<td>Total %</td>
<td align="center" colspan="4"><span id="base1010Total">0</span></td>
<td align="center" colspan="4"><span id="baseCslTotal">0</span></td>
</tr>
</table>
</td>
<td width="200px"></td>
<td>
<table border="0">
<tbody>
<tr>
<td>
<fieldset class='form_fieldset'>
<legend class="field_legend">Filter Criteria</legend>
<table cellspacing="15">
<tbody>
<tr>
<td width="35%">
<label class="field_title">Item Brand:</label>
</td>
<td width="65%">
<select id="filterItemBrand"><option value="">All</option></select>
</td>
</tr>
<tr>
<td>
<label class="field_title">Item Model:</label>
</td>
<td>
<select id="filterItemModel"><option value="">All</option></select>
</td>
</tr>
<tr>
<td align="center" colspan="2">
<input value="Filter" type="submit" name="filterBtn" style="height:35px; width:150px;" />
</td>
</tr>
</tbody>
</table>
</fieldset>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
效果图如下: