<form>表格对齐

最新推荐文章于 2022-08-29 20:50:10 发布

baiyangfu

最新推荐文章于 2022-08-29 20:50:10 发布

阅读量2.1k

点赞数

文章标签： input action class button table div

本文链接：https://blog.csdn.net/baiyangfu_love/article/details/7741174

版权

最近的小项目用到了form表格，但是比较原始的写法没有对齐,如：

                    <div>
                        <br>
                        <form name="addForm" action="functioninfo.jsp" method="post">
                          FunctionID： <input type="text" name="functionID"> 
                        FunctionName：<input type="text" name="functionName"> 
                            URI：         <input type="text" name="uri"><br>
                            type      :   <input type="text" name="type"> 
                            typeID      : <input type="text" name="typeID"><br>
                                        <input type="hidden" name="action" value="add">
                                        <button class="submit" type="submit">新增</button>
                        </form>
                    </div>

于是，期望弄一个可以自动对齐的表格：

<form method="post" name="functioninfo_add" id="add" action="functioninfo.jsp" title='' style="width:550px;margin:0px;">
                          <fieldset>
                              <table>
                                       <tbody>
                                           <tr>
                                                 <td>FunctionID:</td>
                                                 <td><input type="text" name="functionID"   /></td>
                                                 <td>FunctionName:</td>
                                                 <td><input type="text" name="functionName" /></td>
                                           </tr>
                                           <tr>
                                                 <td>URI:</td>
                                                 <td><input type="text" name="uri"   /></td>
                                                 <td>type:</td>
                                                 <td><input type="text" name="type" /></td>
                                           </tr>
                                           <tr>
                                                  <td>typeID:</td>
                                                  <td><input type="text" name="typeID" /></td>
                                                  <td><input type="hidden" name="action" value="add" /></td>
                                                  <td><button class="submit" type="submit">新增</button></td>
                                           </tr>
                                     </tbody>
                             </table>
                       </fieldset>

</form>

效果如：