SUNJOY154 2023-03-29 21:32 采纳率: 100%
浏览 64
已结题

为什么这段代码中表格的各种设置例如align=“center”都没有生效啊,我该怎么修改?

为什么这段代码中表格的各种设置例如align=“center”都没有生效啊,我想把表格的宽度和高度都设置成余下页面的宽度该怎么修改?另外就是上面的列表看起来很丑,怎么改的漂亮点?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>入库</title>
    <style rel="stylesheet" type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        .div1{
            background-color: dodgerblue;
            border: 2px solid;
            height: 50px;
            width: 100%;
        }
        li{
            list-style: none;
            float:left;
            margin-left: 40px;
            margin-top:2px;
            position:relative;
        }
        li:hover{
            border:1px solid black;
        }
        th{

        }
        .div2{
            border: 2px solid;
            height:730px;
            width:100%;
            position:absolute;
        }
    </style>
</head>
<body>
<div class="div1">
    <ul>
        <li><a href="" target="_blank"><img src="kucungailan.png" height="45"></a></li>
        <li><a href="" target="_blank"><img src="ruku.png" height="45"></a> </li>
        <li><a href="" target="_blank"><img src="chuku.png" height="45"></a></li>
        <li><a href="" target="_blank"><img src="nuoku.png" height="45"></a></li>
        <li><a href="" target="_blank"><img src="pandian.png" height="45"></a></li>
    </ul>
</div>
<div class="div2">
    <table align="center" border="1px" cellpadding="20%">
        <tr bgcolor="#faebd7">
            <th></th>
            <th>操作</th>
            <th>物料编号</th>
            <th>物料种类</th>
            <th>物料规格</th>
            <th>单位</th>
            <th>参考价格</th>
            <th>实际单价</th>
            <th>待入库数量</th>
            <th>入库数量</th>
            <th>采购成本小计</th>
            <th>备注</th>
        </tr>
        <tr>
            <td></td>
            <td>1</td>
            <td>添加 移除</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>
                <form class="form1" action="" method="get" target="_blank">
                    <input type="text" name="" maxlength="20" >
                </form>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>1</td>
            <td>添加 移除</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>
                <form class="form1" action="" method="get" target="_blank">
                    <input type="text" name="" maxlength="20" >
                </form>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>2</td>
            <td>添加 移除</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>
                <form class="form1" action="" method="get" target="_blank">
                    <input type="text" name="" maxlength="20" >
                </form>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>3</td>
            <td>添加 移除</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>
                <form class="form1" action="" method="get" target="_blank">
                    <input type="text" name="" maxlength="20" >
                </form>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>4</td>
            <td>添加 移除</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>
                <form class="form1" action="" method="get" target="_blank">
                    <input type="text" name="" maxlength="20" >
                </form>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>5</td>
            <td>添加 移除</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>
                <form class="form1" action="" method="get" target="_blank">
                    <input type="text" name="" maxlength="20" >
                </form>
            </td>
        </tr>
    </table>
</div>
</body>
</html>

  • 写回答

2条回答 默认 最新

  • CSDN专家-showbo 2023-03-29 23:27
    关注

    样式改成下面这样,应该是div2自动占满剩余空间吧,干嘛是table占满?
    用flex布局。表格td cellspacing会被第一个*设置的样式覆盖,需要单独设,align=center没效果也是受到这个样式中的margin:0去掉了margin导致的。
    列表图片不是圆角可以用border-radius处理成圆角的,加些阴影box-shadow和css3动画什么的

            * {
                margin: 0px;
                padding: 0px;
                box-sizing: border-box;/*防止出现水平滚动条*/
            }
    
            html, body {
                height: 100%
            }
    
            body {
                display: flex;
                flex-direction: column
            }
    
            .div1 {
                background-color: dodgerblue;
                border: 2px solid;
                height: 50px;
                width: 100%;
                border-bottom: 0
            }
    
            li {
                list-style: none;
                float: left;
                margin-left: 40px;
                margin-top: 2px;
                position: relative;
                transition: all .3s ease-in
            }
    
                li:hover {
                    transform: scale(.8);
                    transform-origin: center
                }
    
            th {
            }
    
            li img {
                border-radius: 5px; /*处理成圆形改5px为50%*/
                box-shadow: rgba(0,0,0,.4) 3px 3px; /*阴影*/
            }
    
            .div2 {
                border: 2px solid;
                width: 100%;
                flex-grow: 1
            }
    
            table {
                width: 100%;
                border-collapse: collapse;
                /*height:100%;占满div2容器取消注释这句,但是感觉没必要*/
            }
    
                table td, table th {
                    background-color: #fff;
                    border: solid 1px #aaa;
                    padding: 5px;
                }
    
                table tr:nth-child(2n+1) td, table tr:hover td {
                    background-color: #f5f5f5
                }
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 4月7日
  • 已采纳回答 3月30日
  • 修改了问题 3月29日
  • 修改了问题 3月29日
  • 展开全部

悬赏问题

  • ¥15 mysql , 用自己创建的本地主机和用户名 登录不上
  • ¥15 关于#web项目#的问题,请各位专家解答!
  • ¥15 vmtools环境不正常
  • ¥15 请问如何在Ubuntu系统中安装使用microsoft R open?
  • ¥15 jupyter notebook
  • ¥30 informer时间序列预测
  • ¥20 SSR引物多态性分析
  • ¥15 大漠插件在Win11易语言注册调用和免注册灵异事件,VS上注册调用完全没问题
  • ¥15 Addressable缓存机制做热更新的问题
  • ¥15 微信开发者工具vant组件