文本与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与th元素重叠。

​

​

我怎样才能让它在标题下运行？

这种情况发生在表滚动时。

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>

​

您决定在其中使用transform: translateX(-40%);规则的原因尚不清楚，但似乎您正试图改写来自主题的一些规则，这就是您面临的问题；如果您更新了您的问题，添加了更多的代码，或者至少您正在尝试实现什么，那么我可能会更有帮助:)。另外，如果您使用的是框架或主题，请指定哪个框架或主题。

编辑。我看到了您的更新，您不需要在td元素中添加div来应用类，您可以在td元素中直接这样做。然而，似乎有些css规则是重叠的。也许在浏览器中截图结果可能会有帮助。