Css 向引导表添加可变单元格填充

是否可以将表格单元格填充添加到根据视口宽度变化的引导表格中

我已经查看了引导文档以获得现成的解决方案，但似乎没有什么能完全满足我的要求

我正在使用一个引导表来呈现一些财务数据。目前，在大型视口上，我的数据如下所示：

|       Column A       |     Column B      |
|                100.00|              100.0|
|          1,000,000.00|       1,000,000.00|

|  Column A  |  Column B  |
|      100.00|      100.00|
|1,000,000.00|1,000,000.00|

列标题需要居中对齐，但财务数据必须对齐，以便小数点匹配

我要做的是在数字数据中填充或添加边距，以便在大视口中，值在标题下更好地对齐

e、 g

在“大”视口中：

|       Column A       |    Column B       |
|           100.00     |         100.00    |
|     1,000,000.00     |   1,000,000.00    |

缩小较小的视口，使其如下所示：

|       Column A       |     Column B      |
|                100.00|              100.0|
|          1,000,000.00|       1,000,000.00|

|  Column A  |  Column B  |
|      100.00|      100.00|
|1,000,000.00|1,000,000.00|

我的分数如下：

<table class="table">
  <thead>
    <tr>
      <th class="text-center">Column A</th>
      <th class="text-center">Column B</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="text-right">100</td>
      <td class="text-right">100</td>
    </tr>
    <tr>
      <td class="text-right">1,000,000</td>
      <td class="text-right">1,000,000</td>
    </tr>
  </tbody>
</table>

A列
B栏
100
100
1,000,000
1,000,000

我将如何实现这一目标

---

（请注意，由于商业限制，我无法将此继承系统的所有区域重新设计为现代最佳实践）。

您可以使用媒体查询来实现这一点。 Mozilla说

当您想修改网站或应用程序时，媒体查询非常有用 取决于设备的一般类型（例如打印与屏幕）或 特定特性和参数（如屏幕分辨率或 浏览器视口宽度）

因此，您可以编写CSS规则，使其仅在指定的范围内有效

@media (min-width: 1280px) and (max-width: 1920px) { //Between 1280px and 1920px screens
  table td { 
    padding-right:40px; 
  }
}

您可以找到更多了解媒体查询逻辑的详细信息，如果您想深入了解，可以访问