iT邦幫忙

2

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

css
  • 分享至 

  • xImage

各位大大好:

想請問表格在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邦研究生 1 級 ‧ 2020-01-16 08:14:47 檢舉
不過好奇為啥是字體大小的關係@@
@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; 這就是為何這樣可以解決樓主問題的原理。
經驗來源: 很久以前切版遇過^^"
@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邦研究生 1 級 ‧ 2020-01-17 08:48:11 檢舉
謝謝
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

3
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)

mayyola iT邦研究生 1 級 ‧ 2020-01-15 16:22:45 檢舉

謝謝c大,可以用了

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

u r welcome /images/emoticon/emoticon82.gif

0
listennn08
iT邦高手 5 級 ‧ 2020-01-15 15:20:12

.second{
display: inline-block;

你問題有點奇怪 縮排縮完整就顯示正常了

mayyola iT邦研究生 1 級 ‧ 2020-01-15 16:22:58 檢舉

謝謝l大回復

我要發表回答

立即登入回答