Search code examples
htmlcssskeleton-css-boilerplate

How to Change Table Size using Skeleton CSS Framework

I am creating a table using the Skeleton CSS Framework as follows:

<div class="container">
  <h2>V1504 Currently Active Jobs</h2>
  <table class="u-full-width">
    <thead>
      <!-- table head -->
      <tr class="u-full-width">
        <!-- table row -->
        <th>Job Number</th>
        <th>Employee Name</th>
        <th>Department</th>
      </tr>
    </thead>
    <tbody id="job-list">

    </tbody>
  </table>
</div>

The reason why the tbody is empty is because I dynamically insert elements to the table via Javascript. But the table looks like the following:

enter image description here

Now I want to increase the size of the fonts for the table heading as well as its elements, how can this be done using Skeleton CSS if possible?

Solution

  • Skeleton.css is a responsive framework. If you want to change the predefined styles set out in Skeleton.css, the best option would be to setup and link a second stylesheet in the <head> of your HTML document and target these styles there.

    For instance - setting the .u-full-width th { font-size: 16px; font-weight: bold; } will set the font to 16px and bold for all <th> tags with a parent class of .u-full-width.