0

次の例を参照してください：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>
4

2 に答える 2

4

TDはdisplay: table-cell;！

relative positionしたがって、 ingを使用して移動することはできません。代わりに、の<div>中に別のものを作成し<td>、与えborderてください。

代わりに、を与えposition: absoluteますtd。できます！また、に与える必要がありposition: relativeますtable。

フィドル： http： //jsfiddle.net/6t6hq/9/

それ以外の場合は、にも使用できmargin-leftますtd。

于 2012-12-09T06:31:58.833 に答える
2

テーブル全体を移動するために必要な単一のtd境界線を移動することはできません

デモ

table {
   margin-left: 60px;
}

あなたができることはあなたのテーブルを与えることです、あなたborder: 0;のdiv内側にtd それをいくらかの幅、境界線とposition: relative一緒に与えてください、left: 60px;そしてあなたは行ってもいいです

于 2012-12-09T06:33:20.807 に答える