CSSの設計 CSSをあてる単位を意識したclass設計

css-pattern4.css

.row {
  height: 20px;
}
.row-header {
  background-color: #1A237E;
  color: #fff;
}
.col-mail {
  width: 120px;
}
/* こんな感じにピンポイントでCSSを当てやすい！ */

css-pattern4.html

<table>
  <tr class="row row-header">
    <th class="cell cell-header col-no">No</th>
    <th class="cell cell-header col-name">名前</th>
    <th class="cell cell-header col-mail">メールアドレス</th>
  </tr>
  <tr class="row row-body odd">
    <td class="cell cell-body col-no">1</td>
    <td class="cell cell-body col-name">Hoge</td>
    <td class="cell cell-body col-mail">hoge@mail.com</td>
  </tr>
  <tr class="row row-body even">
    <td class="cell cell-body col-no">2</td>
    <td class="cell cell-body col-name">Huga</td>
    <td class="cell cell-body col-mail">huga@mail.com</td>
  </tr>
</table>