将TD边界向右移动一点

Question

我有这个HTML：

tr,
td {
  padding: 10px;
}
td {
  border: 1px solid black;
}
td.none {
  border: none;
}

<table>
  <tr>
    <td>header 1</td>
    <td>text</td>
  </tr>
  <tr>
    <td class='none'></td>
    <td>subheading1</td>
  </tr>
  <tr>
    <td class='none'></td>
    <td style='padding-left:50px'>
      text for subheading1
    </td>
  </tr>
</table>

我希望带有文字text for subheading1的TD的左边框开始向右一点。我如何用CSS做到这一点？我尝试给它的保证金一些负值，但这没有效果。

我希望它的左边框开始于我在此图片中画了一条线。这可能吗？

Fiddle here

Answer 1

在该单元格上将display更改为阻止，然后您可以使用margin-left

tr,
td {
  padding: 10px;
}
td {
  border: 1px solid black;
}
td.none {
  border: none;
}
.target {
  display: block;
  margin-left: 50px;
}

<table>
  <tr>
    <td>header 1</td>
    <td>text</td>
  </tr>
  <tr>
    <td class='none'></td>
    <td>subheading1</td>
  </tr>
  <tr>
    <td class='none'></td>
    <td class="target">
      text for subheading1
    </td>
  </tr>
</table>

Answer 2

这里有代码

＆＃13;

＆＃13;

tr,
td {
  padding: 10px;
   width:230px;
}
td {
  border: 1px solid black;
}
td.none {
  border: none;
}
.this{
  margin-left:50px;
  position:absolute;
  width:140px;

}

＆＃13;

<table>
  <tr>
    <td>header 1</td>
    <td>text</td>
  </tr>
  <tr>
    <td class='none'></td>
    <td>subheading1</td>
  </tr>
  <tr>
    <td class='none'></td>
    <td class='this' style='padding-left:50px'>
      text for subheading1
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;