各位大大好:
想請問表格在div中,要怎麼消除兩者間上層的空間呢?讓table跟ul同齊,謝謝
https://jsfiddle.net/5v6knmrq/1/
html
<html xmlns="https://www.w3.org/1999/xhtml">
<body>
<div class="first">
<ul class="nav">
<li><a href="#home">流程編號</a></li>
<li><a href="#about">流程編號</a></li>
<li><a href="#clients">流程編號</a></li>
<li><a href="#contact">流程編號</a></li>
</ul>
</div>
<div class="second">
<table>
<thead>
<tr>
<th>流程編號</th>
<th>姓名</th>
<th>位</th>
<th>號</th>
<th>見</th>
<th>審查</th>
<th>目前簽核處</th>
<th>送達時間</th>
</tr>
</thead>
<tr>
<td>流程編號</td>
<td>姓名</td>
<td>位</td>
<td>號</td>
<td>見</td>
<td>審查</td>
<td>目前簽核處</td>
<td>送達時間</td>
</tr>
</table>
</div>
</body>
</html>
css
html,body{
height:100%;
}
.first{
background-color:#FFBB66;
width:15%!important;
height:100%;
margin-bottom:0% !important;
float:left;
display:inline-block;
}
.second{
display: inline-block;
border: 1px solid black;
width:70%!important;
margin:0;
}
.nav {
list-style-type: none;
text-align: center;
margin: 0;
padding: 0;
}
.nav li {
font-size: 20px;
}
table, th, td {
border: 1px solid black;
}
try try see
html,body{
height:100%;
}
.first{
background-color:#FFBB66;
width:15%!important;
height:100%;
margin-bottom:0% !important;
float:left;
display:inline-block;
}
.second{
display: inline-block;
border: 1px solid black;
width:70%!important;
margin:0;
float:left;
font-size:0px;
}
.nav {
list-style-type: none;
text-align: center;
margin: 0;
padding: 0;
}
.nav li {
font-size: 20px;
}
table, th, td {
border: 1px solid black;font-size:20px;
}
更好的作法是整個打掉重練(html+css)
.second{
display: inline-block;
你問題有點奇怪 縮排縮完整就顯示正常了