CSS - Unable to get CSS class working, but inline style does work

Question

I'm trying to convert a site to using CSS styles, instead of using tag values such as "width=100%" on table elements and suchlike.

So, I've created various classes, most of which work as I want, but I cannot get one of them working, and can't figure out why.

Specifically, I've created a class as follows:

.w_100{width:100%;}

and then apply it to a table:

<table class="w_100"> ....

but the width of the table is only ever displayed as the width of the content within the table, which is much less than 100%.

However, I note that if I use an inline style:

<table style="width:100%"> ....

then everything works as I expect, but I'd really rather use the class.

So, I'm wondering what silly thing it is that I must be missing or misunderstanding such that the class doesn't do as I expect it to. Any suggestions on how I might get it to work?

Much appreciated. Thanks!

we need to see FULL code, we need to check specificity, order, etc — Temani Afif
– Temani Afif, Commented Sep 13, 2018 at 22:09
are you using materializecss/bootstrap or anything like that or do you have any other rule that might be overriding your class? you can see on DevTools the css rules are applied to each element — Juan
– Juan, Commented Sep 13, 2018 at 22:10
Can we see full code please, make a codepen or something so we can play around with it. Also, try using !important — Daniel Glynn Goodwin
– Daniel Glynn Goodwin, Commented Sep 13, 2018 at 22:10

joshmoto · Accepted Answer · 2018-09-13 23:02:31Z

1

Here is a test with your code, i've coloured the table element black so you can see the table. See your code below running absolutely as expected.

.w_100 {
  width: 100%;
  background: black;
  color: white;
}

<table class="w_100">
  <tr>
    <td>How wide are you?</td>
    <td>I'm a 100% mofo!</td>
  </tr>
</table>

Another test you could do is to check if anything is overriding it. Right click on the table element and inspect the element.

If you are using chrome or most browsers, the right click contextual menu will say Inspect.

If you inspect the element and check the styles panel, you should be able to see anything that could be overriding the table width.

Here is what it should look like...

edited Sep 13, 2018 at 23:02

answered Sep 13, 2018 at 22:48

joshmoto

5,2061 gold badge34 silver badges56 bronze badges

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

2 Comments

Cheddar Over a year ago

Thank you joshmoto; I'll endeavour to play around with the dev tools some more and see what might be overriding it.

Cheddar Over a year ago

As for the other comments above, crying about the lack of code, then if you'd read the question then you'd understand that I was simply trying to find out if there is something about tables/width/classes that I wasn't understanding, and no, of course I'm not about to post several thousand lines of code from a project.

Collectives™ on Stack Overflow

CSS - Unable to get CSS class working, but inline style does work

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related