CODEWITHSUNDEEP
csstwitter-bootstraphtml-table
Remotec
Remotec

Reputation: 10758

Adding variable cell padding to a bootstrap table

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

Upvotes: 0

Views: 529

Answers (1)

oguzhancerit
oguzhancerit

Reputation: 1572

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.

Upvotes: 1

Related Questions