CODEWITHSUNDEEP
csshtml-tablemargin
Alex
Alex

Reputation: 183

Table content margin

I made a table inside a box. By default the table is centered inside a box, but I want it to touch the bottom border of the box. I have two cells in a row and both have pictures I need to make they touch borders in the bottom.

<html>
<head>
    <link href="design.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="box1">      
        <table width="614" border="0" cellspacing="0" cellpadding="0">
            <tr align="center">
                <td>                        
                    <img src="TL.png">
                </td>
                <td width="1" class="vertical"></td>
                <td>
                    <img src="TR.png">
                </td>                   
            </tr>
        </table>
    </div>
</body>


.box1{      
width: 614px;   
margin: 0px;
position:absolute;
border: 1px solid #d0d0d0;
padding: 20px;
border-radius: 20px 20px 20px 20px;
overflow: auto;}
.vertical{
border-right: 1px solid #d0d0d0;
width: 0px; 
height: 250px;
float: left;
box-shadow: 1px 1px 0px #ffffff;}

Can someone explain please?

Upvotes: 0

Views: 67

Answers (1)

Nikhil Patel
Nikhil Patel

Reputation: 1781

Its because of the padding in .box1.

Since the current value is padding : 20px, this applies a 20px to all sides. If you don't want the padding on bottom, change it to : 

padding : 20px 20px 0; /* padding : top left-right bottom */

CSS : 

.box1 {      
    width: 614px;   
    margin: 0px;
    position:absolute;
    border: 1px solid #d0d0d0;
    padding: 20px 20px 0;
    border-radius: 20px 20px 20px 20px;
    overflow: auto;
}

Check this JSFiddle for demo.

EDIT :
For dynamically setting the height of .vertical, use this jQuery :

$('.vertical').each(function () {
    var currentLine = $(this),
        prevImgHeight = currentLine.prev('td').find('img').height(),
        nextImgHeight = currentLine.next('td').find('img').height(),
        lineHeight = (prevImgHeight > nextImgHeight) ? prevImgHeight : nextImgHeight;

    currentLine.css('height', lineHeight + 'px');
});

This will set the height of the line equal to greater of the two adjacent img

Upvotes: 1

Related Questions