How to alter the order of two SPAN inside a TH with CSS only and without using flexbox

Question

I have a code very similar to this one:

table,
th {
  border: 1px solid black;
}

th {
  width: 200px;
  /* for illustration purposes, but in reality there's no width defined */
}

th.text-right {
  text-align: right;
}

th.text-left {
  text-align: left;
}

.icon {
  color: blue;
}

<table>
  <thead>
    <th class="text-left">
      <span>Text</span>
      <span class="icon">Icon</span>
    </th>
    <th class="text-right">
      <span>Text</span>
      <span class="icon">Icon</span>
    </th>
  </thead>
</table>

I need the icon to be always on the left of the text. But the problem is that the text can be aligned to left or right, and in both cases, the icon should "look" like it's part of the text, that means, it always have to leave a little space (only little) between itself and the text.

Is there a way to achieve it with CSS only and without flexbox?

Use CSS Grid layout. But really you should just use flexbox. This is trivial with [`order`](https://stackoverflow.com/a/32829829/2756409) but it requires `display: flex` or `display: grid`. Or as one answer says just put the icon span first, obviously. — TylerH, May 22 '20 at 13:13
@cloned I can't use flexbox because that HTML is generated by a third party component, if I use flexbox, the component degenerates and stacks all the `th`. I can't use `display: grid` neither, because it has to be compatible with IE11. — amedina, May 25 '20 at 06:39
If it stacks all the `` then you are using flexbox wrong. `th.text-left {display: flex}` should be enought to get you going. — cloned, May 25 '20 at 08:38

score 1 · Accepted Answer · answered May 22 '20 at 13:04

You may try to reset direction :

table,
th {
  border: 1px solid black;
  width: 200px;
  /* for illustration purposes, but in reality there's no width defined */
}

th[class]  {
  direction: rtl;
}

th[class] span {
  display: inline-block;
    direction: ltr;
}

th.text-right {
  text-align: right;
}

th.text-left {
  text-align: left;
}

.icon {
  color: blue;
}

<table>
  <thead>
    <th class="text-left">
      <span>Text</span>
      <span class="icon">Icon</span>
    </th>
    <th class="text-right">
      <span>Text</span>
      <span class="icon">Icon</span>
    </th>
  </thead>
</table>

score 1 · Answer 2 · answered May 22 '20 at 13:52

Float can do this:

table,
th {
  border: 1px solid black;
}

th {
  width: 200px;
  /* for illustration purposes, but in reality there's no width defined */
}

th.text-right {
  text-align: right;
}
th.text-right :first-child {
  float:right;
  margin-left:3px;
}

th.text-left {
  text-align: left;
}

th.text-left :last-child {
  float:left;
  margin-right:3px;
}

.icon {
  color: blue;
}

<table>
  <thead>
    <th class="text-left">
      <span>Text</span>
      <span class="icon">Icon</span>
    </th>
    <th class="text-right">
      <span>Text</span>
      <span class="icon">Icon</span>
    </th>
  </thead>
</table>

How to alter the order of two SPAN inside a TH with CSS only and without using flexbox

2 Answers2