CODEWITHSUNDEEP
htmlcsshtml-table
ᔕᖺᘎᕊ
ᔕᖺᘎᕊ

Reputation: 3011

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

Upvotes: 1

Views: 2552

Answers (2)

Nenad Vracar
Nenad Vracar

Reputation: 122047

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>

Upvotes: 1

Maciej Wojcik
Maciej Wojcik

Reputation: 2171

Here You have the code

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

}
<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>

Upvotes: 0

Related Questions