0

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

Text overlap image

How can I can make it go under the header ?

This is happening when table is scrolling

Utkarsh
  • 50
  • 8
  • 1
    add new row value with element. please refer this https://www.w3schools.com/html/html_tables.asp – Rayees AC Apr 25 '22 at 16:06
  • Please show a proper table structure – A Haworth Apr 25 '22 at 16:07
  • The code you have given does not demonstrate the problem. Please turn it into a runnable snippet and add whatever else there is in your system that is altering the layout that way. If you are unsure what CSS is being applied, use your browser devtools to look at the CSS on a right-align cell. – A Haworth Apr 25 '22 at 16:14

1 Answers1

0

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.

Jesús Guillén Yparrea
  • 74
  • 8