[css] 如何消除div中的table空格

css

mayyola 2020-01-15 14:17:39 ‧ 2958 瀏覽

各位大大好:

想請問表格在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;
}

看更多先前的討論...收起先前的討論...

marlin12 iT邦研究生 5 級 ‧ 2020-01-15 19:26:51 檢舉

只要把table裏全部的中文改成英文，table上面的空間便會消失，有童鞋可以解釋原因嗎？

ccutmis iT邦高手 2 級 ‧ 2020-01-16 07:51:07 檢舉

@marlin12:
我用GoogleChrome試了 table裡的中文全改成英文不會影響table上面的空間 o_o"
http://www.web3d.url.tw/ITHELP/tmp/tmp20200116.png

mayyola iT邦研究生 2 級 ‧ 2020-01-16 08:14:47 檢舉

不過好奇為啥是字體大小的關係@@

listennn08 iT邦高手 5 級 ‧ 2020-01-16 08:34:07 檢舉

@marlin12
我只幫他縮排就正常了@@
https://upload.cc/i1/2020/01/16/rfj5nC.gif

ccutmis iT邦高手 2 級 ‧ 2020-01-16 08:54:01 檢舉

推論錯誤修改一下

在div 跟 table 中間因為某些因素產生字元的時候(例如全型空白)
這個在瀏覽器把html轉譯成你看的到的畫面時，
全型空白字元(行內元素) 最起碼會佔一行的高度，　
後面接的是一個 table(區塊元素)除非你用float，
不然它本來就是會移到空白字元佔位的下一行繪制，
因此在這邊最簡單的方式就是把div的font-size設為0，
這一列就像消失了一樣，table因為css繼承特性同樣會被font-size:0影響，所以要在 tr td 或 tr th 裡重新指字 font-size: ooo; 這就是為何這樣可以解決樓主問題的原理。
經驗來源: 很久以前切版遇過^^"

listennn08 iT邦高手 5 級 ‧ 2020-01-16 09:00:13 檢舉

@ccutmis
你說的那個空白是換行本來就有的
你可以用vscode 搜尋\n 然後打開 Use regular expression
所以應該不是那個原因
https://ithelp.ithome.com.tw/upload/images/20200116/20117165VfeekFt9jk.png
他在縮排輸入全形空白才是主因

ccutmis iT邦高手 2 級 ‧ 2020-01-16 09:21:05 檢舉

@listennn08
恩　我試了一下縮排div table 好像結果一樣　那有可能問題是出在樓主縮排用了一些奇怪的字元例如這裡:
＜thead＞
　＜tr＞
　＜th＞流程編號＜/th＞
他用全型空白字元作為縮排字元　結果瀏覽器以為這是要輸出空白字元　因此多了那一行　假如是用半型空白或是tab作縮排字元的話就不會有問題了　因此有你說的那種情況

總之就是　瀏覽器在原本的div 跟 table中間輸出了全型空白　因此多了那一個空白區域

樓主把那些全形空白拿掉後或許就連css fix都不需要了我懶得試^^"

marlin12 iT邦研究生 5 級 ‧ 2020-01-16 19:11:08 檢舉

@listennn08 和 @ccutmis
你們都說對了，去除全部在table裏面的[全型空白字元]，table上面的空行就消失了。
我己經試過了：https://jsfiddle.net/marlin12/526jyf0q/2/
但是，奇怪的是［在table裏面的全型空白字元，應該跟其他中文字一樣，保留在table裏面，為何會被推到table上面？］
算了，這是瀏覽器的特性吧！

mayyola iT邦研究生 2 級 ‧ 2020-01-17 08:48:11 檢舉

謝謝

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

ccutmis

iT邦高手 2 級 ‧ 2020-01-15 15:55:30

最佳解答

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)