Remove the bottom border of a div table

问题

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>

回答1:

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?

来源：https://stackoverflow.com/questions/14246748/remove-the-bottom-border-of-a-div-table

标签

html

internet-explorer-8

border

css-tables