从更广泛的网络和这里的搜索看来,这是一个多次被问到的问题,但是在过去的几周里,我一直找不到能满足我想要的答案。

我在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>

希望这对其他人有帮助

#1楼 票数:0

我建议将cellpadding属性设置为零。

#2楼 票数:0

删除<img>标记以及所有这些第一个单元格中的内容。 然后,在样式表中:

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

如果每个单元格的图像都不同,则必须分别为每个单元格指定background属性。

#3楼 票数:0

查找更新的JSFIDDLE CODE

我无法重现白色边框问题。

为了使中心垂直和水平对齐。

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

  ask by belinea translate from so

未解决问题?本站智能推荐:

1回复

HTML5错误验证中的表格宽度边框单元格间距cellpadding全部为0

我需要使用表来存储一些数据,但是我将所有内容都更改为HTML5和新的CSS。 问题是那些HTML5验证程序使我的表出现验证问题 这是我的桌子 我尝试了一些CSS,但无法使其正常工作。 我需要的是一个宽度为600px,1 TR和3 TD的表,每个TD必须正好为200px(600px /
3回复

如何在表格单元格中垂直对齐文本?

我正在棒球得分网站上工作。 我有一个会议游戏的正面对决桌。 主队在桌子上水平。 客队(如下所示)垂直位于表单元格中。 名称密西西比州(Mississippi State)使表格单元格从上到下长。 如何使阿拉巴马州和奥本州与表格单元的底部对齐? 我正在使用HTML5。放置vali
2回复

在表格单元格元素中创建垂直间隙

我试图弄清楚如何在display: table-cell中位于两个元素之间的垂直间隙display: table-cell元素。 我的局限性是该元素无法更改,必须保留table-cell ,但是table-cell内的html可以更改。 这是我的尝试,但这不起作用: .table {
1回复

表格单元格的边框颜色变化

我有一个非常简单的HTML表格,如下所示: 当我将鼠标悬停在每个单元格上时,单元格的边框可能会更改颜色。 所以我写了下面的CSS来达到效果: 此代码有效,但并非完美。 当我将鼠标悬停在单元格1、2、3(如html中的编号)上时,效果很好,但是当我将鼠标悬停在例如单元格4 5 6上时,
3回复

只能垂直滚动的表格单元格

我正在使用以下CSS和bootstrap 3使表格单元垂直滚动 #scrollable { width: 100%; height: 100%; margin: 0; padding: 0; overflow: auto; } <table table table-cond
1回复

如何不垂直溢出表格单元格并打印表格?

我知道对此有很多疑问,但是他们的解决方案都不适合我。 我有一个仅由表格构成的html页面(我要打印),我希望表格完全适合水平a4纸。 这是我的没有文字的表格(是比赛裁判): 问题是当我添加一些文本时,高度会改变。 我尝试在td内以一定的高度添加div ,但是效果不佳... 我
2回复

表格单元格中的锚定图像未调整为单元格宽度

相当新的HTML5和CSS。 我正在尝试调整表格单元格中图像的大小,并且它的大小不会达到单元格的大小 - 任何帮助都会受到赞赏! 链接: http : //mercury.ict.swin.edu.au/cos10020/s100505453/techno_syndicate/index.
4回复

从表格单元格div中删除顶部填充

我有同样的问题。 现在,我想将<h1>添加到formDiv ,结果为: 我希望公司注册排在最前面。 我发现许多线程给出答案: vertical-align: top; 但这对我不起作用。 请帮忙。 HTML是: 检查JSFiddle我希望将“问题” h1