为什么这段代码中表格的各种设置例如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>
样式改成下面这样，应该是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
}