CODEWITHSUNDEEP
htmlcss
BonJon
BonJon

Reputation: 799

How to setup the border of an element in my case

I am trying to create a div hack for my table.

I want to place a div in a table cell that block the cell bottom border and create a effect that the cell is extended below.

HTML

<table cellspacing="15">
    <tr>
       <td>123</td><td>123 <div class="block"></div></td><td>123</td><td>123</td>
    </tr>
    <tr>
        <td>123</td><td>123</td><td>123</td><td>123</td>
    </tr>
    <tr>
        <td>123</td><td>123</td><td>123</td><td>123</td>
    </tr>    
</table>

css 

td {
    position:relative;
    border:solid 1px red;
    padding:0;
}

.block {
    background-color: white;
    border-left:solid 1px red;
    border-right:solid 1px red;
    position:absolute;
    width:100%;
    height:10px;
    top:10px;

}

http://jsfiddle.net/tfjm7L5y/

For some reason, the border left and border right in my .block div doesn't line up with the table cell right/left border. Is there something I am missing here? Thanks for the help!

Upvotes: 0

Views: 33

Answers (1)

Patrick Moore
Patrick Moore

Reputation: 13344

You can specify left property to account for the misalignment. The element .block <div> is a child of its parent, and so its border is also contained within the parent <td> space. That's why your .block <div> doesn't align properly to the furthest outside border on the <td>. The difference should be the size of the parent <td> border (1px).

.block {
    background-color: white;
    border-left:solid 1px red;
    border-right:solid 1px red;
    position:absolute;
    width:100%;
    height:10px;
    top:10px;
    left: -1px;

}

http://jsfiddle.net/tfjm7L5y/1/

Upvotes: 2

Related Questions