刪除html表格單元格中的白色邊框和垂直/水平圖像

Question

從我在更廣泛的網上搜索和在這裏看起來這是一個問了很多次的問題，但在過去的幾個星期裏，我一直無法找到答案是做我想做的。

我在blogger.com上使用第三方（付費）響應模板。

我正在創建一個需要有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> 

作爲一個腳註，以幫助通過執行以下操作別人誰遇到我的問題我已經解決了它。

它添加到主博客CSS擺脫白色邊框：

.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; 
} 

，然後用它來居中圖像：

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

希望這是幫助別人

Answer 1

我建議將cellpadding屬性設置爲零。

Answer 2

刪除<img>標籤和真正的東西，從那些第一個單元格。然後，在你的樣式表：

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

如果每個小區的形象應該是不同的，你必須seperately指定背景屬性爲他們每個人。

Answer 3

查找更新的JSFIDDLE CODE。

我不能重現白色邊框問題。

用於製作垂直和水平中心。

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