删除div表的底部边框 [英] Remove the bottom border of a div table

问题描述

我试图在div表格中显示一些图像，但我一直在每个图像的底部获取边框。大约2-5个像素。

我会发送图片，但我是新用户。

我想删除这个边框。

图片完全是52 x 10。

我只在IE8中使用这个应用程序。

edit ：I做了一个更大的布局 - 我只是将代码编写成了我遇到的单个问题，即表格底部的边界。

  / * tables * / 
 .WorkFlowTableStyleA 
 {
 display：table; 
 width：10px; 
 border-collapse：collapse; 
 border-style：none; 
} 
 
 
 / * rows * / 
 .WorkflowRowStyleA 
 {
 display：table-row; 
 height：52px; 
 
} 
 
 / * arrow容器* / 
 .WorkflowCellArrowHolderA 
 {
 display：table-cell; 
 width：10px; 
} 
 
 
< div class =WorkFlowTableStyleA> 
< div class =WorkflowRowStyleA> 
< div class =WorkflowCellArrowHolderAstyle =background-color：Black;> 
< img src =../../ Images / Flowchart / spacerTestTenByFiftyTwo.png/> 
 
< / div> 
< / div> 
< / div> 
 
< div class =WorkFlowTableStyleA> 
< div class =WorkflowRowStyleA> 
< div class =WorkflowCellArrowHolderAstyle =background-color：Black;> 
< img src =../../ Images / Flowchart / spacerTestTenByFiftyTwo.png/> 
 
< / div> 
< / div> 
< / div> 
  

解决方案

MadHenchbot正在与边界来自。这不是边界它是你的div中没有​​空缺的空间。 （更改为style =background-color：Red）来验证。

好消息是，因为听起来像图像已经是你想要的大小了认为有一个快速解决方案：

pre $ / *表* /
.WorkFlowTableStyleA
{
显示：表格;
/ *摆脱宽度：10px; * /
border-collapse：collapse;
border-style：none;
}


/ * rows * /
.WorkflowRowStyleA
{
/ *摆脱display：table-row; * /
height：52px;
}

/ * arrow容器* /
.WorkflowCellArrowHolderA
{
/ *摆脱display：table-cell; * /
/ *摆脱宽度：10px; * /
height：52px; < ---添加此设置div高度。
}


这对我来说是个诀窍。你可能不得不放宽，但我猜这是没有必要的。另外，除非你正在构建布局，我不知道为什么你需要所有的表格/ div的东西......它看起来只是复杂的事情？

I'm trying to display some images in a div table, but I keep getting the border on the bottom of each image. It's about 2-5 pixels.

I'd send an image, but I'm a new user.

I want to remove this border.

The image is 52 x 10 exactly.

I'm only in IE8 for this app.

edit: I'm doing a larger layout- I just boiled the code down to the single problem I'm having, which is the border at the bottom of the table.

/*tables*/
.WorkFlowTableStyleA
{
    display: table;
    width: 10px; 
    border-collapse:collapse;
    border-style: none;  
}


/*rows*/
.WorkflowRowStyleA
{
    display: table-row;
    height: 52px;

}

/*arrow containers*/
.WorkflowCellArrowHolderA
{
    display: table-cell;
    width: 10px ;
}


<div class="WorkFlowTableStyleA">   
<div class="WorkflowRowStyleA">
<div class="WorkflowCellArrowHolderA" style="background-color: Black;">
<img src="../../Images/Flowchart/spacerTestTenByFiftyTwo.png" />

</div>
</div>
</div>

<div class="WorkFlowTableStyleA">   
<div class="WorkflowRowStyleA">
<div class="WorkflowCellArrowHolderA" style="background-color: Black;">
<img src="../../Images/Flowchart/spacerTestTenByFiftyTwo.png" />

</div>
</div>
</div>

解决方案

MadHenchbot is on the money with where the "border" is coming from. It's not a border it's unfilled space in your div. (Change to style="background-color: Red") to verify that.

Good news is, since it sounds like the images are the size you want them already I think there's a quick fix:

/*tables*/
.WorkFlowTableStyleA
{
    display: table;
    /* get rid of width: 10px; */
    border-collapse:collapse;
    border-style: none;   
}


/*rows*/
.WorkflowRowStyleA
{
    /* get rid of display: table-row; */
    height: 52px;
}

/*arrow containers*/
.WorkflowCellArrowHolderA
{
    /* get rid of display: table-cell; */
    /* get rid of width: 10px; */
    height: 52px;                             <--- Add this to set the div height.
} 

That did the trick for me. You may have to put width back in, but I'm guessing it's unnecessary. Also, unless you're building a layout I'm not sure why you need all the table/div stuff... It looks like it's just complicating things?

这篇关于删除div表的底部边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！