2

I have a table with two cells and a span inside the right cell. I want the span to be positioned to the left end of the row, so I used these styles:

span {
    position: absolute;
    left: 0;
}
tr {
    position: relative;
}

In Firefox it works well as seen here:

enter image description here

However, Chrome ignores the position:relative and the span floats outside the table:

enter image description here

Why does this happen and how can I solve it?

Here is the jsfiddle: https://jsfiddle.net/9wa2sruu/

Thank you so much in advance. :)

Stealth
  • 155
  • 2
  • 9
  • 1
    Oh...tables and positioning...always fun. – Paulie_D Apr 27 '16 at 20:22
  • there you go: https://jsfiddle.net/9wa2sruu/10/ – Nabeel Khan Apr 27 '16 at 20:34
  • @Paulie_D Thanks for marking it as duplicate, I searched for similar questions but for some reason I didn't find that one. So `transform: scale(1,1);`? Oh, CSS, sometimes you kill me... @_@ – Stealth Apr 27 '16 at 20:49
  • @NabeelKhan Thank you, but I want the span to be positioned relative to the row, not to the cell. Also, I can't alter the structure of the table, it must be with CSS only. – Stealth Apr 27 '16 at 20:51

1 Answers1

0

cant you just do it this way?

tr, td {
  position: relative;
}

and html:

<tr>
  <td><span></span></td>
  <td></td>
</tr>

https://jsfiddle.net/9wa2sruu/9/

Riskbreaker
  • 4,621
  • 1
  • 23
  • 31
  • I can't move the span to the first cell because sometimes, depending on the variable chosen by the user, the first cell is removed. Due to limitations of the platform I must respect that structure and use only CSS. – Stealth Apr 27 '16 at 20:28
  • you need to give a div around span and make it absolute https://jsfiddle.net/9wa2sruu/10/ – Nabeel Khan Apr 27 '16 at 20:35