如何使用骨架 CSS 框架更改 Table 大小

Question

我正在使用骨架 CSS 框架创建一个 table，如下所示：

<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>

tbody 为空的原因是因为我通过Javascript 动态插入元素到table。但是 table 看起来像下面这样：

现在我想增加 table 标题及其元素的字体大小，如果可能的话如何使用骨架 CSS 来完成？

Answer 1

Skeleton.css 是一个响应式框架。如果您想更改 Skeleton.css 中设置的预定义样式，最好的选择是在 HTML 文档和目标的 <head> 中设置和 link 第二个样式表那里有这些款式。

例如 - 设置 .u-full-width th { font-size: 16px; font-weight: bold; } 会将所有 <th> 标签的字体设置为 16px 和粗体，其父 class 为 .u-full-width。

如何使用骨架 CSS 框架更改 Table 大小

How to Change Table Size using Skeleton CSS Framework

html

css

skeleton-css-boilerplate