文本与CSS转换属性重叠

Question

当我使用

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

表结构如下所示

<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>

TD的元素，如下所示，如下所示，

我如何才能使其在标题下进行？

当桌子滚动时，这正在发生

Answer 1

但是，只要您保持代码紧密，就很难回答该问题的比例和结构。

.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>

为什么您决定使用转换：Translatex（-40％）;规则，但似乎您可能正在尝试覆盖主题来自主题的某些规则，因此您是问题，因此您是问题面对；如果您更新问题并添加更多代码或至少您要实现的目标，那么我可能会更有帮助:)。另外，如果您使用的是框架或主题，则指定哪个。

编辑。
我看到了您的更新，您无需在TD元素中添加DIV即可应用类，您可以直接在TD元素中进行。但是，似乎某些CSS规则是重叠的。也许浏览器中结果的屏幕截图可能会有所帮助。