Adding variable cell padding to a bootstrap table

Question

Is it possible to add table cell padding to a bootstrap table that varies according to the viewport width?

I've checked the bootstrap documentation for an out of the box solution but nothing seemed to do quite what I wanted.

I am using a Bootstrap table to render some financial data. At present on large view ports my data looks like this:

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

The column titles need to be center aligned but the financial data must be aligned so that the decimal points match.

What I want to do is to pad or add margin to the numeric data so that on the large viewport the values are better aligned under the titles

e.g.

On the large viewport:

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

Reducing down on smaller viewports to look like this:

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

My mark-up is as follows:

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

How would I go about achieving this?

(Please note due to commercial constraints I cannot rework all areas of this inherited system for modern day best practise).

oguzhancerit · Accepted Answer · 2020-12-16 22:27:40Z

1

You can use media queries to achieve this. Mozilla says;

Media queries are useful when you want to modify your site or app depending on a device's general type (such as print vs. screen) or specific characteristics and parameters (such as screen resolution or browser viewport width).

So you can write CSS rules to be valid only within the range you specify.

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

You can find more details here to understanding the media queries logic and if you want to dive deeper you can visit mozilla documentation about the media queries.

edited Dec 16, 2020 at 22:27

answered Dec 16, 2020 at 22:21

oguzhancerit

1,5831 gold badge18 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Adding variable cell padding to a bootstrap table

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related