By drupalfriend123 on

Hi,

I am using bartik theme. In the style.css file, i have the

table text align to center

. It is working fine throughout the site. But only one table i want to align to left. I thought I can simply write the below and it should do it. But it is not. It is still aligning to center. Any advice how to align that table to left in html without changing the styles.css?

<Table align = "left" >

Thanks a lot.

D

⋅ Categories: Drupal 7.x

Comments

paean99’s picture

paean99 commented

I think that the 'table text align to center' css rule doesn't exist in Bartik, so i assume that you put it there.

To override a css rule you will have to create one more specific and/or put it after the more general ones.
Css rules have a 'weight'. The one with the biggest weight will override the others. When two rules have the same weight, the one that is calculated latter will override the other.
The 'weight' is calculated by what is used to declare the rule. IDs are the more specific (#myid), then Classes (.myclasse), at last are the elements (td, p, div) and pseudo elements. More specific = more weight.

If for example the table that you want to give a 'special' css is a table view with a machine name 'my_view', you can use something like this for the td

.view-id-my_view td {
text-align: left;
}

It will override 

td {
text-align: center;
}

even if its not after the simple td rule. Relevant here since the Bartik theme has a

tr td,
tr th {
  padding: 4px 9px;
  border: 1px solid #fff;
  text-align: left; /* LTR */
}

that you have to override.

You can use the 'inspect element' from Chrome (IE and Firefox also have an equivalent tool) to discover the css properties and experiment with them.

There are other things to be considered like inline styles and the !important declaration. For more info go here Assigning property values, Cascading, and Inheritance