Text overlapping with CSS transform property

Question

When I am using

 .right-align {
     text-align: right !important;
     transform: translateX(-40%);
 }

The Table structure is showing below

<table>
    <thead>
        <tr>
            <th>Bid
            </th>
            <th>Offer
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div class="right-align">
                    200
                </div>
            </td>
            <td>
                <div class="right-align">
                    221
                </div>
            </td>
        </tr>
    </tbody>
</table>

The td is overlapping the th element as seen below

How can I can make it go under the header ?

This is happening when table is scrolling

Answer 1

It is very hard to answer the question as it is, however, the table should keep its proportions and structure as long as you keep the code tight:

.right-align {
  text-align: right !important;
}

<table>
  <thead>
    <tr>
      <th>Bid</th>
      <th>Offer</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="right-align">200</td>
      <td class="right-align">221</td>
    </tr>
  </tbody>
</table>

It is nebulous why you decided to use the transform: translateX(-40%); rule in there, but it seems you may be trying to overwrite some rules that come from a theme hence the problem you are facing; If you update your question and add more pieces of code or at least what you are trying to achieve then i could be more helpful :). Also if you are using a framework or theme specify which one.

EDIT. I saw your updates, you don't need to add a div within the td element to apply a class, you can do it directly in the td element. However, it seems that some css rules are overlapping. Maybe a screenshot of the results in a browser could be helpful.