CSS table カラム幅、text-align center指定方法

いつも忘れるのでメモっときます。

idで指定（px指定）

WordPressの場合はidを付けるのはできませんでしたが、idをつけれると一番簡単に指定できます。　テーブルにidを指定して設定する場合で以下記述しています。

表の幅はpx指定
各カラムもpx指定でcenter指定
一番左のカラム（first-child)だけ左詰めで上書き

#table_asset {
  width: 560px;
  border-collapse: collapse;
 table-layout: fixed; /* ← これを必要 */
}

#table_asset th,
#table_asset td {
  width: 120px;
  text-align: center;
}

#table_asset th:first-child, 
#table_asset td:first-child {
  width: 200px;
  text-align: left;
}

WordPressの場合（%指定）

WordPressの場合、『高度な設定』でクラス名を設定すると、figureのクラス名になる。　以下はWordpressを使っている場合。 WordPressの場合は、すでに色々スタイルが設定されており、それらの設定より優先順位を上げて効果をだすため、.ai_agentというクラス名だけでなくElement名のfigureも付けて、その後にtableと付けている。　これで２点プラスとなり、優先順位が上がり採用されやすくなる。　しかし各列ごとに設定が面倒臭い。

table,
figure.ai_agent table{
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
}

figure.ai_agent table th, 
figure.ai_agent table td {
  border: 2px solid #FFFF;
  padding: 8px;
}

figure.ai_agent table tr:nth-of-type(2n+1) {
    background-color: #f2f0f0 !important;
}

/* 1列目*/
figure.ai_agent table th:nth-child(1),
figure.ai_agent table td:nth-child(1) {
  width: 10%;
  text-align:center;
}
/* 2列目*/
figure.ai_agent table th:nth-child(2),
figure.ai_agent table td:nth-child(2) {
  width: 20%;
  text-align:center;
}
/* 3列目*/
figure.ai_agent table th:nth-child(3),
figure.ai_agent table td:nth-child(3) {
  width: 10%;
  text-align:center;
}
/* 4列目*/
figure.ai_agent table th:nth-child(4),
figure.ai_agent table td:nth-child(4) {
  width: 60%;
  text-align:center;
}

Javascriptで設定(%指定）

上記のような設定を毎回するのは面倒臭いので、Javascriptで作れないかChatGPTに聞いたら以下のような答えがかえってきました。　実際使ってみたら使えて、こっちのほうが簡単でした。　

function applyTableStyles(columnWidths, textAlignments, figureClass) {
    // クラス名が指定されていない場合はエラー回避
    if (!figureClass) {
        console.error("Figureタグのクラス名を指定してください。");
        return;
    }

    // 列の幅とテキスト配置のデータを配列化
    let widths = columnWidths.split("|");
    let aligns = textAlignments.split("|");

    // CSS文字列の構築
    let css = `
        figure.${figureClass} table {
            width: 100%;
            table-layout: auto;
            border-collapse: collapse;
        }

        figure.${figureClass} table th, 
        figure.${figureClass} table td {
            border: 2px solid #FFFF;
            padding: 8px;
        }

        figure.${figureClass} table tr:nth-of-type(2n+1) {
            background-color: #f2f0f0 !important;
        }
    `;

    // 各列の設定を適用
    for (let i = 0; i < widths.length; i++) {
        if (widths[i]) {
            css += `
                figure.${figureClass} table th:nth-child(${i + 1}),
                figure.${figureClass} table td:nth-child(${i + 1}) {
                    width: ${widths[i]};
                    text-align: ${aligns[i] || "center"};
                }
            `;
        }
    }

    // スタイル要素を作成・適用
    let styleTag = document.createElement("style");
    styleTag.innerHTML = css;
    document.head.appendChild(styleTag);
}

// 使用例
applyTableStyles("10%|20%|||", "center|left||", "ai_agent");

ヘッダー行をBoldにする場合

thがある場合

figure.investment_type_table table th{
    font-weight:bold;
}

thがない場合

WordPressでtableを作成するとthがありませんでした。　なので以下で可能です。

figure.investment_type_table table tr:first-child td{
    font-weight:bold;
}

行を指定

/* 2行目*/
figure.investment_type_table table tr:nth-child(2) td{
    font-weight:bold;
}

/* 4行目*/
figure.investment_type_table table tr:nth-child(4) td{
    font-weight:bold;
}

セルを指定

figure.ai_agent table tr:nth-child(4) td:nth-child(2) {
  color: blue;
  background-color: #f0f8ff; /* セルが選択されたことを分かりやすくするために背景色も追加 */
}

nth-child(1)

first-childと同様nth-child(1)でも使用できます。

scssやAngularやJapaScriptではnth-child(n)のループ処理でnを変化させて使うことが出来るのと、同じ記法で書いたほうがわかりやすいので、私はnth-child(1)のほうが好きです。