Assigning classes within php / styling with css

Question

I'm trying to style a table i'm retrieving from my database. I'm currently echoing it out like this:

echo "<table class='rwd-table'>";

echo "<tr><th>ID</th><th>Username</th><th>Name</th><th>Last Name</th></tr>";

    while($row = mysqli_fetch_array($result)){

      echo "<tr><td data-th='Movie Title'>" . $row['id'] . "</td><td data-th='Genre'>" . $row['username'] . "</td>
      <td data-th='Year'>" . $row['first_name'] . "</td><td data-th='Gross'" . $row['last_name'] . "</td></tr>";
    }

echo "</table>";

And my css like this:

.rwd-table {
  ...
  tr {...
  }
  th {...
  }
  td {...
  }
}

.rwd-table {
  ...
}

But the css doesn't seem to affect anything. I'm acctually trying to apply this: https://codepen.io/geoffyuen/pen/FCBEg To my situation. Please help.

you cant nest CSS unless you use something like SAS, so your tr cant be nested like that it has to be .rwd-table tr{ ... } .rwd-table td{ ... } etc.. SAS is a parser library for the bootstrap library. So that's a bit more then I care to get into sass-lang.com — ArtisticPhoenix
– ArtisticPhoenix, Commented Nov 24, 2017 at 22:06

ArtisticPhoenix · Accepted Answer · 2017-11-24 22:16:23Z

Just to elaborate what i put in the Comments, you can't nest CSS

.rwd-table {
  ...
  tr {...
  }
  th {...
  }
  td {...
  }
}

.rwd-table {
  ...
}

Like that, you have to do them on their own line like this

 .rwd-table tr{
  ...
 }

.rwd-table th{
  ...
 }

.rwd-table td{
  ...
 }

Or you can combine them if they have similar styles.

.rwd-table tr, .rwd-table th, .rwd-table td{
  ... similar styles ...
}

.rwd-table tr{
   ... additional unique styles ...
 }

Also of note is once the browser hits these CSS errors it stops processing the sheet, so nothing after it is applied either. That's why none of your styles work.

It is possible to use this type of nested syntax but you have to use something like SASS

http://sass-lang.com/

Which is a CSS parser, kind of like a template engine, that takes the SASS style sheets and compiles it down to normal CSS, beforehand.

Personally I really wish that did work out of the box!

But if you check the link i provided they use nested css statements?
If you click on the gear ( at the top of the CSS box ) they are using SCSS, CSS per-processer. It also says this next to the CSS (SCSS) title. I've never used that one but I am sure it's similar to SASS. In any case you should be able to just put them in your sheet the normal way as I outlined above.

Jeremy Harris · Accepted Answer · 2019-01-07 18:07:52Z

1

Would it be possible to call the td through a class within your echo statement?

echo "<tr><td ***CLASS=“TEST”*** data-th='Movie Title'>" . $row['id'] . "</td><td data-th='Genre'>" . $row['username'] . "</td><td data-th='Year'>" . $row['first_name'] . "</td><td

You would then call the information from your CSS file through the TEST attribute.

edited Jan 7, 2019 at 18:07

Jeremy Harris

24.7k13 gold badges84 silver badges133 bronze badges

answered Jan 7, 2019 at 16:44

Dwayne McAliskey

113 bronze badges

Collectives™ on Stack Overflow

Assigning classes within php / styling with css

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related