圖像分割成表：行

也許解決方法很簡單，但我沒有發現任何回答我的問題之間刪除空間...圖像分割成表：行

我想要的圖像分割成幾個，所以我可以CLIC它或將其懸停，並在看起來像是單個圖像的情況下創建很酷的互動。問題是，我的圖像在表格的行之間有一個不需要的空間。

因此，這裏正是我的意思做的事：

<div id="blocfour"> 
 
    <table border="0" cellspacing="0" cellpadding="0"> 
 
     <tr> 
 
     <td><img src="http://cuisines-et-bains.com/wp-content/uploads/2016/07/step2.png" /></td> 
 
     <td><img src="http://cuisines-et-bains.com/wp-content/uploads/2016/07/step3.png" /></td> 
 
     </tr> 
 
     <tr> 
 
     <td><img src="http://cuisines-et-bains.com/wp-content/uploads/2016/07/step1.png"/></td> 
 
     <td><img src="http://cuisines-et-bains.com/wp-content/uploads/2016/07/step4.png" /></td> 
 
     </tr> 
 
    </table> 
 
</div>

我想「崩潰」的CSS，以及其他衆多的事情，但naaah，該死的空間仍然是在這裏 - 或者我做錯了。任何想法如何我可以擺脫它？

來源

2016-07-08 GaletteRaclette

的可能的複製[如何刪除行之間不必要的空間，表中的列？]（http://stackoverflow.com/questions/2279 396 /如何刪除不需要的空間之間的行和列在表中） – DavidDomain

你可以通過改變img的佈局解決它block：

td img{display:block}

<div id="blocfour"> 
 
    <table border="0" cellspacing="0" cellpadding="0"> 
 
     <tr> 
 
     <td><img src="http://cuisines-et-bains.com/wp-content/uploads/2016/07/step2.png" /></td> 
 
     <td><img src="http://cuisines-et-bains.com/wp-content/uploads/2016/07/step3.png" /></td> 
 
     </tr> 
 
     <tr> 
 
     <td><img src="http://cuisines-et-bains.com/wp-content/uploads/2016/07/step1.png"/></td> 
 
     <td><img src="http://cuisines-et-bains.com/wp-content/uploads/2016/07/step4.png" /></td> 
 
     </tr> 
 
    </table> 
 
</div>

來源

2016-07-08 13:34:18 potashin

感謝您的回答。我在我的網站上試過了，但看起來我的問題最終並不那麼簡單。 WordPress的主題包括已經這麼多的CSS，它並沒有幫助...：S 這裏是我試圖（和掙扎）設置這個鏈接： http://cuisines-et-bains.com /腳本測試/ 任何想法我應該做什麼？ – GaletteRaclette

@GaletteRaclette：你可以使用'！important'來重寫wordpress的風格。 – potashin

噢，是的！這工作:) 所以我只是將這行添加到我的CSS： td img { \t display：block！important; } 非常感謝。 – GaletteRaclette

如果您使用表格中的文字，您可以在CSS中重置font-size表格單元格。

table { 
 
    font-size: 0; 
 
}

<div id="blocfour"> 
 
    <table border="0" cellspacing="0" cellpadding="0"> 
 
    <tr> 
 
     <td> 
 
     <img src="http://cuisines-et-bains.com/wp-content/uploads/2016/07/step2.png" /> 
 
     </td> 
 
     <td> 
 
     <img src="http://cuisines-et-bains.com/wp-content/uploads/2016/07/step3.png" /> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <img src="http://cuisines-et-bains.com/wp-content/uploads/2016/07/step1.png" /> 
 
     </td> 
 
     <td> 
 
     <img src="http://cuisines-et-bains.com/wp-content/uploads/2016/07/step4.png" /> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</div>

來源

2016-07-08 13:34:08 makshh

圖像分割成表：行

回答

相關問題