タイトル : Gatsby テーブルの罫線の指定 global.css 2026/02
更新日 : 2026-02-22
カテゴリ : プログラミング
タグ :
Gatsbyのテーブルの指定を変えたくなった
【Gatsby.js】グローバル CSS を反映させたいときは、gatsby-browser.js に設定を記述する
gatsby-browser.js にcssファイルの読み込みを追加
global.cssを読み込むようにする
import './global.css'; ★これ
require("prismjs/themes/prism-okaidia.css")global.cssの用意
/* テーブル全体の枠線とセルの隙間をなくす */
table {
border-collapse: collapse;
width: 80%;
margin-bottom: 1rem;
}
/* ヘッダーとセルの枠線・パディング設定 */
table th, table td {
border: 1px solid #000; /* ここで線の色と太さを指定 */
padding: 2px 8px;
text-align: left;
}