CODEWITHSUNDEEP
cssposition
fkingan
fkingan

Reputation: 351

td {position:relative; left} does not move the border

Please see the following example: http://jsfiddle.net/6t6hq/7/

when I use td with position relative to move it, it only move the content but not the border. How can I move the border with the content?

<table>
    <tr>
        <td id="relativeTD">1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
</table>
<div id="expected">expected</div>​
<style>
td{
    border:1px solid #000;
    min-width:100px;
}
#relativeTD{
    position:relative;
    left:60px;
}
#expected{
    border:1px solid #000;
    position:relative;
    left:60px;
}​
</style>

Upvotes: 0

Views: 3738

Answers (2)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167212

TD is of display: table-cell;!

So you can't move it using relative positioning. Instead, create another <div> inside the <td> and give border and stuff.

Instead, give position: absolute for the td. It works! Also, you need to give position: relative to the table.

Fiddle: http://jsfiddle.net/6t6hq/9/

Else, you can use margin-left too to the td.

Upvotes: 4

Mr. Alien
Mr. Alien

Reputation: 157384

You cannot move a single td border you need to move the whole table

Demo

table {
   margin-left: 60px;
}

Either what you can do is give your table border: 0;, place a div inside your td give it some width, border and position: relative with left: 60px; and you are good to go

Upvotes: 2

Related Questions