テーブルの追加削除ボタンを左側に表示したい

kintone カスタマイズ
3

フレックスボックスを使用すればCSSだけでもボタンの移動はできましたが、レイアウトが崩れるので、CSSのみはあまり推奨はできないですね。
私もプログラミングに詳しくなく、手探りでやっていたのでおかしなところがあるかもしれませんが、こんな感じでできました。

css

/* テーブル全体のスタイル */
.subtable-gaia.edit-subtable-gaia {
width: 100%;
}

/* 操作列を左端に移動 /
.subtable-gaia.edit-subtable-gaia thead th.subtable-operation-gaia,
.subtable-gaia.edit-subtable-gaia tbody td.subtable-operation-gaia {
order: -1; / 操作列を左端に移動 */
text-align: center;
}

/* 各行をフレックスボックスに */
.subtable-gaia.edit-subtable-gaia thead tr,
.subtable-gaia.edit-subtable-gaia tbody tr {
display: flex;
}

/* 各列をフレックスボックスで配置 /
.subtable-gaia.edit-subtable-gaia thead th,
.subtable-gaia.edit-subtable-gaia tbody td {
flex: 1;
text-align: center;
white-space: nowrap; / 内容が折り返されないように /
box-sizing: border-box; / 幅計算の一貫性を保つ */
}

/* 操作列に固定幅を指定 */
.subtable-gaia.edit-subtable-gaia th.subtable-operation-gaia,
.subtable-gaia.edit-subtable-gaia td.subtable-operation-gaia {
flex: 0 0 80px;
}

js

document.addEventListener(“DOMContentLoaded”, function () {
const table = document.querySelector(“.subtable-gaia.edit-subtable-gaia”);

if (table) {
    const headerCells = table.querySelectorAll("thead th");

    // 列幅を同期する関数
    function syncColumnWidths() {
        const bodyRows = table.querySelectorAll("tbody tr");

        // ヘッダーの列幅を取得し、ボディに適用
        headerCells.forEach((headerCell, index) => {
            const headerWidth = headerCell.offsetWidth;

            bodyRows.forEach((row) => {
                const bodyCell = row.children[index];
                if (bodyCell) {
                    bodyCell.style.flex = `0 0 ${headerWidth}px`;
                }
            });
        });
    }

    // 初期同期
    syncColumnWidths();

    // 行が追加されるたびに同期を実行
    const observer = new MutationObserver(() => {
        syncColumnWidths();
    });

    // tbody に対して監視を開始
    const tbody = table.querySelector("tbody");
    if (tbody) {
        observer.observe(tbody, { childList: true });
    }
}

});

環境や今後のアップデートで変わると思いますが、参考になれば。

「いいね！」 1