2016-07-08 2 views
0

아마 해결책은 간단하지만 나는 아직 내 질문에 대한 대답 아무것도없는 것 사이에이미지 테이블로 분할 : 나는 몇 가지에 이미지를 분할 할 ... 행

을 공간을 제거, 그래서 그것을 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, 망할 공간은 여전히 ​​여기에있다 - 또는 어쩌면 내가 잘못 했어. 내가 어떻게 그걸 없앨 수 있니?

+0

가능한 복제 [행 사이에 불필요한 공간을 제거하는 방법 및 테이블의 열?] (http://stackoverflow.com/questions/2279) 396/how-to-remove-unwanted-space-between-rows-and-columns-in-table) – DavidDomain

답변

1

당신은 blockimg의 레이아웃을 변경하여 문제를 해결할 수 있습니다

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>

+0

답변 해 주셔서 감사합니다. 내 웹 사이트에서 시도했지만 내 문제가 결국 간단하지 않은 것 같습니다. 워드 프레스 테마에는 이미 많은 CSS가 포함되어 있으므로 도움이되지 않습니다 ... : S 여기에 내가 설정하려고하는 (고민중인) 링크가 있습니다. http://cuisines-et-bains.com/script-test/ 내가 무엇을해야하는지 잘 모르겠습니까? – GaletteRaclette

+0

@GaletteRaclette : 워드 프레스 스타일을 다시 쓰려면'! important'와 함께 사용할 수 있습니다. – potashin

+1

오우 예! 그게 효과가 :) 그래서 난 내 CSS에이 라인을 추가했습니다 : td img { \t display : block! important; } 감사합니다. – GaletteRaclette

0

표에서 텍스트를 사용하는 경우 font-size을 CSS의 표 셀로 재설정 할 수 있습니다.

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>