Search code examples
vue.jsbootstrap-vuetext-alignmenttext-align

Why do my bootstrap-vue b-table column headers not center in deployment?

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

Solution

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