Question

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>

Answer 1

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.