将可变单元格填充添加到引导表答案

【问题标题】：Adding variable cell padding to a bootstrap table将可变单元格填充添加到引导表
【发布时间】：2021-03-27 14:47:20
【问题描述】：

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

我已经检查了引导文档以获取开箱即用的解决方案，但似乎没有什么能完全达到我想要的效果。

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

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

缩小较小的视口，看起来像这样：

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

我将如何实现这一目标？

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

【问题讨论】：

标签： css twitter-bootstrap html-table

【解决方案1】：

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

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

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

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

您可以找到更多详细信息here 以了解媒体查询逻辑，如果您想深入了解，可以访问mozilla documentation about the media queries。

【讨论】：