前端页面问题,请大佬提点...我是真的不会~

Question

如题我后端的,一个页面改了改去,丑的不行,请教怎么修改~

我努力修改成这样子了~

 <%@ page contentType="text/html;charset=UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<script type="text/javascript" src="${ctx}/static/js/validation.js"></script>
<script type="text/javascript" src="${ctx}/static/js/jquery.form.js"></script>

<script src="${ctx}/static/kindeditor-4.1.10/kindeditor-all-min.js"
    type="text/javascript"></script>
<script src="${ctx}/static/kindeditor-4.1.10/lang/zh_CN.js"
    type="text/javascript"></script>
<div id="descriptionDiv" style="margin: 2%; width: 98%">

<!--        <tr style="height: 30px">
            <td colspan="2"></td>
        </tr> -->
        <br>
        <tr style="height: 20px">
            <td><span class="labelFont">菜单名称:</span></td>
            <td><input type="text" id="menuName" name=""
                maxlength="20" style="width: 205px; height: 20px;"/></td>
        </tr>
        &nbsp;
        <br/>
        <tr style="height: 20px">
            <td><span class="labelFont">上级菜单:</span></td>
            <td><input class="easyui-combobox" id="parentName"
                style="width: 218px; height: 30px;"
                data-options="valueField:'parentId', textField:'parentName'" /></td>
        </tr>
        <br/>
        <br/>
        <tr style="height: 20px">
            <td><span class="labelFont">type类型:</span></td>
            <td><select class="easyui-combobox" id="type" style="width: 218px; height: 30px;">
                    <option name="type" value="sub_button">(一级)sub_button</option>
                    <option name="type" value="view">(二级)view</option>
                    <option name="type" value="click">(二级)click</option>
            </select></td>
        </tr>
        <br/>
        <br/>
        <tr style="height: 20px">
            <td><span class="labelFont">key的值:</span></td>
            <td><input type="text" id="keyValue" name=""
                maxlength="20" style="width: 205px; height: 20px;"/></td>
        </tr>
        <br/>
        <tr style="height: 20px">
            <td><span class="labelFont">菜单等级:</span></td>
            <td><select class="easyui-combobox" id="grade" style="width: 218px; height: 30px;">
                    <option name="grade" value="1" selected="selected">1级菜单</option>
                    <option name="grade" value="2">2级菜单</option>
            </select></td>
        </tr>
        <br/>
        <br/>
        <tr style="height: 20px">
            <td><span class="labelFont">跳转地址:</span></td>
            <td><input type="text" id="url" name="url"
                maxlength="250" style="width: 205px; height: 20px;"/>
            </td>
            <td>
                <font color="red">注意：正确url请加协议（https://或者http://）</font>
            </td>
        </tr>
        <br/>
    <!--    <tr style="height: 20px">
            <td colspan="2"></td>
        </tr> -->
        <tr>
            <td><a id="saveBtn" class="easyui-linkbutton"
                iconCls="icon-save" style="width: 75px">&nbsp;保存</a> 
            </td>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <td>
                <a id="returnHomeId" class="easyui-linkbutton" iconCls="icon-back" style="width: 75px" 
                href="${ctx}/rjs/weixin/menu/weiXinMenu">&nbsp;返回</a>
            </td>
        </tr>
</div>
<div id="successDialog" class="easyui-dialog" title="提示"
    data-options="resizable:true,minimizable:false,collapsible:false,maximizable:false,closed:true"
    fit="false" style="width: 300px; height: 100px;">
    <i style="margin-top: 30px">保存成功</i><br /> <a
        class="easyui-linkbutton" iconCls="icon-ok"
        style="width: 75px; margin: 0px auto"
        href="${ctx}/rjs/weixin/menu/weiXinMenu">&nbsp;确定</a>
</div>
<script type="text/javascript">
    //文档加载完成
    $(document).ready(function() {
        loadStatus();
        $("#saveBtn").click(function() {
            loadStatus();
        });
    });

    $(document).ready(function() {
        $("#saveBtn").click(function() {
            var menuName = $("#menuName").val();
            var parentName = $('#parentName').combobox('getText');
            var parentId = $('#parentName').combobox('getValue');
            var type = $('#type').combobox('getValue');
            var keyValue = $("#keyValue").val();
            var grade = $('#grade').combobox('getValue');
            var url = $("#url").val();
            if (menuName == "") {
                $.messager.alert("消息", "请填写菜单名");
                return;
            }
            if (type == "") {
                $.messager.alert("消息", "请选择type类型");
                return;
            }
            if (grade == "") {
                $.messager.alert("消息", "请选择菜单等级");
                return;
            }
            if ($.trim($("input[name=url]").val()) != ""){
                var fwdurl=$("input[name=url]").val();
                var res=!!fwdurl.match(/^((ht|f)tps?):\/\/([\w\-]+(\.[\w\-]+)*\/)*[\w\-]+(\.[\w\-]+)*\/?(\?([\w\-\.,@?^=%&:\/~\+#]*)+)?/);
                if(!res){
                    $.messager.alert("消息", "请输入正确的链接地址");                   
                    return;
                }
            }
            el

            $.ajax({
                url : "${ctx}/rjs/weixin/menu/insertMenu",
                type : "post",
                async : false,
                cache : false,
                data : {
                    menuName : menuName,
                    parentId : parentId,
                    type : type,
                    keyValue : keyValue,
                    grade : grade,
                    url : url
                },
                dataType : "json",
                success : function(resp) {
                    if (resp.status == 1) {
                        $("#successDialog").dialog("open");
                    } else {
                        $.messager.alert("消息", resp.message);
                    }
                },
                         error : function(jqXHR, textStatus, errorThrown) {
                    if (jqXHR.getResponseHeader("sessionStatus") != "timeout") {
                        if ($("#flagSpan").val() == 1) {
                            $.messager.alert("消息", "添加菜单失败，请稍后再试");
                        } else {
                            $.messager.alert("消息", "跳转类型或排序错误!");
                        }
                    }
                } 
            })
        });
    });

    //上级名称下拉
    function loadStatus() {
        $.ajax({
            url : "${ctx}/rjs/weixin/menu/getParentName",
            type : "post",
            async : false,
            cache : false,
            dataType : "json",
            success : function(resp) {
                if (resp.data != null && resp.status == "1") {
                    var data = resp.data;
                    var fdata = [];
                    for (var i = 0; i < data.length; i++) {
                        fdata.push(data[i]);
                    }
                    $("#parentName").combobox("loadData", fdata);
                }
            },
            error : function() {
                $.messager.alert("错误", "请求失败，请稍后再试");
            }
        });
    }
</script>

不知道为什么,怎么折腾里面的width 大小 他展示的时候都不变化,
请大佬指点下~

Answer 1

<style>
                table{
                    background-color: #000
                }
                td{
                    background: #fff;
                }
                td input{
                    height:100%;
                    width:100%;
                    border:0px;
                }
            </style>
<!--上面的加载head里，或者写下css里，这是一些演示-->

 <table>
            <tr>
                <td width="300">此处加了一个，，该列全部跟着变</td><td><input type="text" name="name" ></td><td>注释、提示</td>
            </tr>
            <tr>
                <td width="200">此处又加了一个，无变化</td><td rowspan="2"><input type="text" name="name" value="这儿合并了此列的两行，合并时删掉下面的"></td><td>注释、提示</td>
            </tr>
            <tr>
                <td width="400">此处再加了一个，他是跟随宽度最大的一起变</td><td>注释、提示</td>
            </tr>
            <tr>
                <td>测试测试</td><td><input type="text" name="name" ></td><td>注释、提示</td>
            </tr>
            <tr>
                <td>测试测试</td><td colspan="2"><input type="text" name="name" value="这儿合并了此行的后两列，合并时删掉后面的"></td>
            </tr>
        </table>