2

I have a b-table with centered column headers. The headers are centered when I run locally at http://localhost..., but not in deployment. Why might this be?

I have tried two approaches to centering the headers. I have added the text-center prop to the b-table component like this...

    <b-table
        striped
        hover
        show-empty
        sort-icon-left
        :items="items"
        :fields="fields"
        class="text-center"
      >
    </b-table>

  1. I have included this style rule in my custom scss file, which I import into the app at App.vue

    table { text-align: center; } Both approaches work just fine locally, but when I deploy the column headers are aligned right.

Here is a sceenshot from my elements tab in the browser inspection tool. enter image description here

And the styles tab makes it clear that a text-align: right rule in the tag selector overrides the text-align:center rule in the tag selector. enter image description here

GNG
  • 1,341
  • 2
  • 23
  • 50
  • on your deployment, can you see what is applied to your elements – Keith Nicholas Jul 30 '20 at 23:06
  • I think you are suggesting I check to see what classes are applied to my elements in the browser's inspection tab. I just added a screenshot of the div for one of the column headers in my question. – GNG Aug 01 '20 at 01:04
  • That was a helpful suggestion. Based on what you can see in the screenshots I posted in my question, I reckon I have to add text-align: center to the selector in my custom scss file. – GNG Aug 01 '20 at 01:10

1 Answers1

2

text-align is an inherited property.

Which means that, when resolving this property for an element, the browser looks for any rules targeting that element first. The element in question is a <th>.
If the browser finds any such rules, it applies the one with the highest selector specificity or the last one from rules with equal specificity.

If no such rules exist, then it inherits the value from the closest parent which has a text-align specified value.
If no ancestor has a text-align value, it defaults to start, which means left for documents with direction="ltr" and right for documents with direction="rtl".

So, basically, the CSS applied to one of the ancestors by Bootstrap:

.text-center {
  text-align: center !important;
}

...gets overridden by the following rule applied on the actual element:

th { text-align: right }

regardless of the specificity of the parent rule (because it doesn't target the element directly).

To override the th rule you could use:

table.text-center * {
  text-align: center
}

... because table.text-center * has a higher specificity than th and they both target the element (the <th>).

Obviously, if you only want to apply the centering to <th> elements, you should replace * with th in the above selector.

To answer your question on why would it work on local and not on remote: your remote has additional CSS (in app.ee70fc50.css), which resolves text-align value for <th> elements, therefore the parent value is ignored (while on local the parent value is inherited, because you don't apply CSS to <th>s).

tao
  • 82,996
  • 16
  • 114
  • 150