html 표 셀에서 흰색 경계선 및 세로/가로 이미지 제거

Question

더 넓은 웹에서 검색 할 때와 여기에 여러 번 묻는 질문 인 것 같습니다. 지난 몇 주 동안 찾을 수 없었습니다. 내가 원하는 것을하는 대답.

blogger.com에서 제 3 자 응답 형 템플릿을 사용하고 있습니다.

html 테이블이 필요한 새 페이지 (게시물이 아님)를 만들고 있습니다.

각 새 행의 첫 번째 셀에는 항상 동일한 크기의 이미지가 포함됩니다.

이미지를 세로 및 가로로 가운데에 맞춰야하고 이미지 주변에 흰색 테두리가 있어야합니다.

저는 기본 html과 일부 CSS를 알고 있지만 블로거 템플릿을 사용하면 CSS가 html 내에있는 경향이 있습니다 (내가 알 수있는 것부터).

<style type="text/css">.nobrtable br { display: none } tr {text-align: center;} tr.alt td {background-color: #eeeecc; color: black;} tr {text-align: center;} caption {caption-side:bottom;} </style> 

<br /> 
<table border="2" bordercolor="#0033FF" cellpadding="5" cellspacing="0" style="background-color: #99ffff; border-collapse: collapse; width: 100%;"><tbody> 
<tr style="background-color: #0033ff; color: white; padding-bottom: 4px; padding-top: 5px;"> 
<th width="15%"><span style="font-family: Arial, Helvetica, sans-serif;">Column 1</span></th> <!-- COLUMN NAME 1 --> 
<th width="20%"><span style="font-family: Arial, Helvetica, sans-serif;">Column 2</span></th> <!-- COLUMN NAME 2 --> 
<th width="20%"><span style="font-family: Arial, Helvetica, sans-serif;">Column 3</span></th> <!-- COLUMN NAME 3 --> 
<th width="20%"><span style="font-family: Arial, Helvetica, sans-serif;">Column 4</span></th> <!-- COLUMN NAME 4 --> 
<th width="25%"><span style="font-family: Arial, Helvetica, sans-serif;">Column 5</span></th> <!-- COLUMN NAME 5 --> 
</tr> 
<tr class="alt"> 
<td><div class="separator" style="clear: both; text-align: center;"> 
</div> 
<div class="separator" style="clear: both; text-align: center;"> 
<img border="0" src="http://imageshack.com/a/img661/6216/lOGXW9.jpg" /></div> 
<br /></td> 
<td>Table Cell A2</td> 
<td>Table Cell A3</td> 
<td>Table Cell A4</td> 
<td>Table Cell A5</td> 
</tr> 
<tr> 
<td>Table Cell B1</td> 
<td>Table Cell B2</td> 
<td>Table Cell B3</td> 
<td>Table Cell B4</td> 
<td>Table Cell B5</td> 
</tr> 
<tr class="alt"> 
<td>Table Cell C1</td> 
<td>Table Cell C2</td> 
<td>Table Cell C3</td> 
<td>Table Cell C4</td> 
<td>Table Cell C5</td> 
</tr> 
<tr> 
<td>Table Cell D1</td> 
<td>Table Cell D2</td> 
<td>Table Cell D3</td> 
<td>Table Cell D4</td> 
<td>Table Cell D5</td> 
</tr> 
</tbody></table> 

다음을 수행하여 내 문제가 발생하는 다른 사람이 내가 그것을 해결 한 데 도움이되는 각주로 :

여기 내 코드입니다. 이 다른 사람

에 도움입니다

<td align="center" valign="center"><img src="*image url*;" /></td> 

희망 : 이미지의 중심을

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img, 
.BlogList .item-thumbnail img { 
    padding: 0 !important; 
    border: none !important; 
    background: none !important; 
    -moz-box-shadow: 0px 0px 0px transparent !important; 
    -webkit-box-shadow: 0px 0px 0px transparent !important; 
    box-shadow: 0px 0px 0px transparent !important; 
} 

다음이를 사용

흰색 테두리 없애 주 블로그 CSS이 추가

Answer 1

cellpadding 속성을 0으로 설정하는 것이 좋습니다.

Answer 2

<img> 태그를 제거하고 첫 번째 셀에서 실제로 아무 것도 제거하십시오. 그런 다음 스타일 시트 : 각 셀의 이미지가 달라야하는 경우

tr td:first-child { 
    padding: 0px; 
    background: url("http://imageshack.com/a/img661/6216/lOGXW9.jpg") no-repeat center; 
} 

, 당신은 별도로 그들 각각의 배경 속성을 지정해야합니다.

Answer 3

업데이트 번호 JSFIDDLE CODE을 찾으십시오.

흰색 테두리 문제를 재현 할 수 없습니다.

세로 및 가로 모두 중앙 맞춤.

td{ text-align: center; vertical-align: middle; }