SCSS

by Wave7KN

HTML

<head>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>

<table>
  <thead>
    <tr>
      <th></th>
      <th class="font1">Hiragino Sans</th>
      <th class="font2">Hiragino Kaku Gothic Pro</th>
      <th class="font3">Meiryo</th>
      <th class="font4">MS P Gothic</th>
      <th class="font5">system-ui</th>
      <th class="font6">sans-serif</th>
    </tr>
  </thead>
  <tbody>
    <tr class="weight400">
      <td>400</td>
      <td class="font1">事業本部 新規企画部 システム営業 UU1課</td>
      <td class="font2">事業本部 新規企画部 システム営業 UU1課</td>
      <td class="font3">事業本部 新規企画部 システム営業 UU1課</td>
      <td class="font4">事業本部 新規企画部 システム営業 UU1課</td>
      <td class="font5">事業本部 新規企画部 システム営業 UU1課</td>
      <td class="font6">事業本部 新規企画部 システム営業 UU1課</td>
    </tr>
    <tr class="weight500">
      <td>500</td>
      <td class="font1">事業本部 新規企画部 システム営業 UU1課</td>
      <td class="font2">事業本部 新規企画部 システム営業 UU1課</td>
      <td class="font3">事業本部 新規企画部 システム営業 UU1課</td>
      <td class="font4">事業本部 新規企画部 システム営業 UU1課</td>
      <td class="font5">事業本部 新規企画部 システム営業 UU1課</td>
      <td class="font6">事業本部 新規企画部 システム営業 UU1課</td>
    </tr>
  </tbody>
</table>

SCSS

body {
  background: #fff;
  font-size: 14px;
}

table{
  text-align: left;
}

.weight400{
  font-weight: 400;
}
.weight500{
  font-weight: 500;
}

.font1{
  font-family: "Hiragino Sans";
}
.font2{
  font-family: "Hiragino Kaku Gothic Pro";
}
.font3{
  font-family: Meiryo;
}
.font4{
  font-family: "MS P Gothic";
}
.font5{
  font-family: system-ui;
}
.font6{
  font-family: sans-serif;
}