css - td {位置：相对；left} 不移动边框

Question

请参阅以下示例：http: //jsfiddle.net/6t6hq/7/

当我使用带有相对位置的 td 来移动它时，它只移动内容而不移动边框。如何移动内容的边框？

<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是display: table-cell;！

所以你不能使用relative positioning 移动它。相反，<div>在里面创建另一个<td>并给予border和东西。

---

相反，position: absolute为td. 有用！position: relative另外，你需要给table.

小提琴：http: //jsfiddle.net/6t6hq/9/

---

否则，您也可以margin-left使用td.

Answer 2

您无法移动单个 td 边框，您需要移动整个表格

演示

table {
   margin-left: 60px;
}

你可以做的就是给你的桌子，在你的桌子里面border: 0;放一个 宽度，边框和带，你就可以走了divtdposition: relativeleft: 60px;