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

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

图片说明

我努力修改成这样子了~

图片说明

 <%@ 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 大小 他展示的时候都不变化,
请大佬指点下~

16个回答

<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>
weixin_38221608
buyax 回复JingGe_HELLO: 哦,好的
大约 2 年之前 回复
JingGe_HELLO
JingGe_HELLO 别理我
大约 2 年之前 回复
weixin_38221608
buyax 666,大神,我玩一下先
大约 2 年之前 回复

加上style试一下,再不改变的话,打开浏览器的开发者工具进行调试,推荐google,看影响因素,就能调节了,可能原因格式问题,权重问题。

weixin_38221608
buyax 谢谢大神~
大约 2 年之前 回复

看了一下你的代码,你是要改td的吧,表格元素里你改一个td会影响他所在的一列的,所以你给每一个都单独设置width是不起作用的

weixin_38221608
buyax 谢谢大神,我尝试下
大约 2 年之前 回复
qq_37524684
子幽 在td里面加标签,也可以多弄几个td然后colspan合并列,也可以不用table
大约 2 年之前 回复

width调的话,加到内层标签上,如span或者input

weixin_38221608
buyax 好的,大神
大约 2 年之前 回复

控件的width你要设置到控件上,你设置到td上干嘛

weixin_38221608
buyax 我不太清出页面~
大约 2 年之前 回复

加上style试一下

weixin_38221608
buyax 好的
大约 2 年之前 回复

写两个分别的类 css 这样看起来整齐点

shlwb0
shlwb0 看下css 教程吧,我也说不出来
大约 2 年之前 回复
weixin_38221608
buyax 我不会写css...能请教下吗...
大约 2 年之前 回复

你的页面太乱了,整体的布局都不对,标准的
<!DOCTYPE html>



Title



weixin_38221608
buyax 大神 你的应该被转义了, 什么都看不到...
大约 2 年之前 回复

用插件,引入css样式

weixin_38221608
buyax 不会写css,能请教下吗~~
大约 2 年之前 回复

设置行高lineheight 再把width设置到具体控件上,并且不要用固定的像素值,用百分比,如width=100%

weixin_38221608
buyax 好的 ,我尝试下,谢谢哦
大约 2 年之前 回复
共16条数据 1 尾页
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问

相似问题

24
关于select下拉框选择触发事件,死活触发不了~请大佬帮忙看下~
1
不知道哪位好心的大佬能帮小弟解决困扰了一天的问题,关于登录页面的PHP代码问题 心好累
7
大一编程问题,大佬们来看看吗..
1
有关有效数字位数,新手提问~求各位大佬帮帮忙啊,感谢感谢。
4
C#萌新遇到了“未将对象引用到对象实例”的问题 希望大佬指点一下
3
jsp页面<a>标签传参问题
1
在vs2013连接SQL Server2008R2出现了问题。。。求大佬解决~
12
js文件无法获取路径,相对的,绝对的路径都用过了
5
maven项目中,启动tomcat服务器后,在前端登录页面输入中文,后台接受的数据乱码
9
请教前端大佬esayUI问题,怎么把一个href通过用户权限条件隐藏或者置为不可选择.....
1
大佬,java.security 包,在c++中有没有类似的实现库,谢谢
7
关于SpringBoot+myBatis实体的字段返回前端后格式变化的问题
5
Spring boot 前端页面跳转的时候,用户请求数据,后台怎么知道是谁在请求
3
有没有大佬帮忙解决一下这个问题
2
Android stdio3.0 配置opencv出现了如下问题,请各位大佬解答一下
2
有关sqlmap的问题,感谢路过的大佬瞧两眼
0
Scrapy 中关于 request 和 yield 的问题,求大佬帮忙··
1
各位大佬cb遇到点问题新建project后双击不出现main.cpp 求解决
1
jwt登录过期的问题求大佬指教
3
JAVA刚入门,想问大佬们一些问题....