Question

当我使用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 position来移动它。相反，在<div>内创建另一个<td>并提供border和其他内容。

相反，请为position: absolute提供td。有用！此外，您需要将position: relative提供给table。

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

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

Answer 2

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

Demo

table {
   margin-left: 60px;
}

您可以做的就是给您的表格border: 0;，在div内放置td 给它一些宽度，边框和position: relative与left: 60px;，你很高兴

td {position：relative; left}不移动边框

2 个答案: