How to overlap the table(td) text without using position property

Question

Here, I'm having issues with the table in display inline-block property. In my scenario, I need to add 2 spans and text inside the td element. When I use it the text wrapped into the next line. Here I need the text overlap into the span, i.e., the spans should not be disturbing the td's text content. I don't want to use position property. Here is my simple demo.

table {
  border-collapse: collapse;
  width: 200px;
}

table tr td {
  border: 1px solid;
}

span.leftspan {
  display: inline-block;
  width: 50%;
  height: 20px;
  background-color: skyblue;
}

span.rightspan {
  display: inline-block;
  width: 40%;
  height: 20px;
  background-color: red;
}

<table>
  <tr>
    <td><span class="leftspan"></span><span class="rightspan"></span>12</td>
    <td><span class="leftspan"></span><span class="rightspan"></span>25</td>
  </tr>
</table>

In the demo 2 numbers (12, 25) shouldn't wrap into the next line. I need to achieve this without position property.

Federico López · Answer 1 · 2019-08-28T10:23:56.467

Using display:flex on the td element and flex-grow: 1 in the element containing the number will make this element to fill the rest of the space on the parent td element. then you can make them overlap using a translateX transform. Check this answer for extra info about how flex and flex-grow.

table {
  border-collapse: collapse;
  width: 200px;
}

table tr td {
  border: 1px solid;
  display: flex;
}

span.leftspan {
  display: inline-block;
  width: 50%;
  height: 20px;
  background-color: skyblue;
}

span.rightspan {
  display: inline-block;
  width: 40%;
  height: 20px;
  background-color: red;
}

span.rest {
  flex-grow: 1;
  transform: translateX(-100%)
}

<table>
  <tr>
    <td><span class="leftspan"></span><span class="rightspan"></span><span class="rest">12</span></td>
    <td><span class="leftspan"></span><span class="rightspan"></span><span class="rest">25</span></td>
  </tr>
</table>

text content doesn't overlap the span. I need to overlap text into the span element. — Shanmu_92, Aug 28 '19 at 10:12
I have updated the answer to make then overlap using `transform: translateX` — Federico López, Aug 28 '19 at 10:24

score -1 · Answer 2 · answered Aug 28 '19 at 10:44

Added Div, and added style for Div

table {
  border-collapse: collapse;
  width: 200px;
}

table tr td {
  border: 1px solid;
}

table tr td div {
  display: flex;
}

span.leftspan {
  display: inline-block;
  width: 50%;
  height: 20px;
  background-color: skyblue;
}

span.rightspan {
  display: inline-block;
  width: 40%;
  height: 20px;
  background-color: red;
}

<table>
  <tr>
    <td>
      <div>
        <span class="leftspan"></span><span class="rightspan"></span>12
      </div>
    </td>
    <td>
      <div>
        <span class="leftspan"></span><span class="rightspan"></span>25
      </div>
    </td>
  </tr>
</table>

I dont want to wrap spans with div – Shanmu_92 Aug 28 '19 at 12:25 — Shanmu_92, Aug 28 '19 at 12:25

How to overlap the table(td) text without using position property

2 Answers2