CSSフレームワークのBulmaではあらかじめ用意されているis-primary、is-success、is-warning、is-dangerのクラスをタグに設定することで対応するカラーを簡単に設定することができます。
https://bulma.io/documentation/elements/table/#colors
<table class="table">
<tr class="is-primary"><td>Primary</td></tr>
<tr class="is-info"><td>Info</td></tr>
<tr class="is-success"><td>Success</td></tr>
<tr class="is-warning"><td>Warning</td></tr>
<tr class="is-danger"><td>Danger</td></tr>
</table>
これを拡張するには以下のようにBlumaのCSS変数を以下のように設定して定義します。
<style>
.table tr.is-custom-lightblue {
--bulma-table-color: #333; /* テキスト色 (濃い色) */
--bulma-table-cell-heading-color: #333;
--bulma-table-cell-background-color: lightblue; /* 背景色 */
--bulma-table-cell-border-color: lightblue;
}
</style>
...省略...
<table class="table">
<tr class="is-custom-lightblue"><td>LightBlue</td></tr>
</table>
色々なバリエーションを用意した全量は以下です。
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
<style>
/* ライトブルー */
.table tr.is-custom-lightblue {
--bulma-table-color: #333; /* テキスト色 (濃い色) */
--bulma-table-cell-heading-color: #333;
--bulma-table-cell-background-color: lightblue; /* 背景色 */
--bulma-table-cell-border-color: lightblue;
}
/* パステルピンク */
.table tr.is-custom-pink {
--bulma-table-color: #333;
--bulma-table-cell-heading-color: #333;
--bulma-table-cell-background-color: #FFE4E1;
--bulma-table-cell-border-color: #FFE4E1;
}
/* ライトグリーン */
.table tr.is-custom-green {
--bulma-table-color: #333;
--bulma-table-cell-heading-color: #333;
--bulma-table-cell-background-color: #E8F5E9;
--bulma-table-cell-border-color: #E8F5E9;
}
/* ライトイエロー */
.table tr.is-custom-yellow {
--bulma-table-color: #333;
--bulma-table-cell-heading-color: #333;
--bulma-table-cell-background-color: #FFF9C4;
--bulma-table-cell-border-color: #FFF9C4;
}
/* ラベンダー */
.table tr.is-custom-lavender {
--bulma-table-color: #333;
--bulma-table-cell-heading-color: #333;
--bulma-table-cell-background-color: #E6E6FA;
--bulma-table-cell-border-color: #E6E6FA;
}
/* ピーチ */
.table tr.is-custom-peach {
--bulma-table-color: #333;
--bulma-table-cell-heading-color: #333;
--bulma-table-cell-background-color: #FFDAB9;
--bulma-table-cell-border-color: #FFDAB9;
}
/* ミント */
.table tr.is-custom-mint {
--bulma-table-color: #333;
--bulma-table-cell-heading-color: #333;
--bulma-table-cell-background-color: #F5FFFA;
--bulma-table-cell-border-color: #F5FFFA;
}
/* スカイブルー */
.table tr.is-custom-skyblue {
--bulma-table-color: #333;
--bulma-table-cell-heading-color: #333;
--bulma-table-cell-background-color: #87CEEB;
--bulma-table-cell-border-color: #87CEEB;
}
/* ライトグレー */
.table tr.is-custom-gray {
--bulma-table-color: #333;
--bulma-table-cell-heading-color: #333;
--bulma-table-cell-background-color: #F5F5F5;
--bulma-table-cell-border-color: #F5F5F5;
}
</style>
</head>
<body>
<table class="table">
<tr class="is-black"><td>Black</td></tr>
<tr class="is-dark"><td>Dark</td></tr>
<tr class="is-light"><td>Light</td></tr>
<tr class="is-white"><td>White</td></tr>
<tr class="is-primary"><td>Primary</td></tr>
<tr class="is-link"><td>Link</td></tr>
<tr class="is-info"><td>Info</td></tr>
<tr class="is-success"><td>Success</td></tr>
<tr class="is-warning"><td>Warning</td></tr>
<tr class="is-danger"><td>Danger</td></tr>
<tr class="is-custom-lightblue"><td>LightBlue</td></tr>
<tr class="is-custom-pink"><td>Pink</td></tr>
<tr class="is-custom-green"><td>Green</td></tr>
<tr class="is-custom-yellow"><td>Yellow</td></tr>
<tr class="is-custom-lavender"><td>Lavender</td></tr>
<tr class="is-custom-peach"><td>Peach</td></tr>
<tr class="is-custom-mint"><td>Mint</td></tr>
<tr class="is-custom-skyblue"><td>SkyBlue</td></tr>
<tr class="is-custom-gray"><td>Gray</td></tr>
</table>
</body>
</html>
