ᔕᖺᘎᕊ ᔕᖺᘎᕊ - 3 months ago 21
CSS Question

Shift TD border-left to the right a bit

I have this 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>





I want the TD with the text
text for subheading1
to have its left border starting a bit to the right. How do I do this with CSS? I tried giving its margin some negative values but that had no effect.

enter image description here

I'd like its left border to start where I've drawn a line in this image. Is that possible?

Fiddle here

Answer

Change display to block on that cell and then you can use 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>