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

**URL:** <https://community.cybozu.dev/t/topic/9781>\
**Category:** kintone 開発相談\
**Created:** [2024 年 11 月 26 日午前 2:29 UTC](https://community.cybozu.dev/t/topic/9781 "2024-11-26T02:29:45Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![yasumori](https://avatars.discourse-cdn.com/v4/letter/y/ccd318/32.png) [@yasumori](https://community.cybozu.dev/u/yasumori)\
**Post date:** [2024 年 11 月 26 日午前 2:29 UTC](https://community.cybozu.dev/t/topic/9781/1 "2024-11-26T02:29:45Z")

</div>

テーブルの追加削除を行っているボタンについて、左側に表示をしたいです。  
以前まで下記コードのCSSにてボタンの移動が出来ておりましたが、  
最近kintoneの仕様が変わり、ボタンが元通りの右側に移動・テーブルの枠付きの表示に変更になっておりました。

CSSの変更箇所、CSS以外のカスタマイズ方法についてご教示いただけませんでしょうか。  
横長のテーブルだと右側にボタンがあると不便なため、標準で左側に表示をしていただければ助かるのですが。。。

※以前まで「subtable-operation-gaia-old」というタグの名称だったのため、「subtable-operation-gaia」に変更しましたが、  
左側に移動できませんでした。

```javascript
.subtable-row-label-gaia{
	padding-left:74px;
}
.subtable-gaia.edit-subtable-gaia{
	margin-left:64px;
}
.subtable-gaia.edit-subtable-gaia > tbody > tr{
	position:relative;
}
.subtable-gaia.edit-subtable-gaia > tbody > tr > td.subtable-operation-gaia-old{
	position:absolute;
	left:-64px;
	top:0;
}
.subtable-gaia.edit-subtable-gaia > tbody > tr > td.subtable-operation-gaia-old .add-row-image-gaia{
	margin-left:0 !important;
}
.subtable-gaia.edit-subtable-gaia > tbody > tr > td.subtable-operation-gaia-old .remove-row-image-gaia{
	margin-right:12px;
}

```

---

<div class="post-metadata">

**Author:** ![jurippe](https://sea1.discourse-cdn.com/flex015/user_avatar/community.cybozu.dev/jurippe/32/27_2.png) [@jurippe](https://community.cybozu.dev/u/jurippe)\
**Post date:** [2024 年 12 月 11 日午前 2:59 UTC](https://community.cybozu.dev/t/topic/9781/2 "2024-12-11T02:59:08Z")

</div>

以前はどうだったか忘れちゃったんですが、  
追加削除ボタンが列の中に入ってしまっているので、CSSだけでは難しいかもしれませんね💦

---

<div class="post-metadata">

**Author:** ![danke](https://avatars.discourse-cdn.com/v4/letter/d/0ea827/32.png) [@danke](https://community.cybozu.dev/u/danke)\
**Post date:** [2025 年 1 月 15 日午前 1:23 UTC](https://community.cybozu.dev/t/topic/9781/3 "2025-01-15T01:23:16Z")

</div>

フレックスボックスを使用すれば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 });
    }
}

```

});

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

---

<div class="post-metadata">

**Author:** ![yasumori](https://avatars.discourse-cdn.com/v4/letter/y/ccd318/32.png) [@yasumori](https://community.cybozu.dev/u/yasumori)\
**Post date:** [2025 年 1 月 17 日午前 12:15 UTC](https://community.cybozu.dev/t/topic/9781/4 "2025-01-17T00:15:20Z")

</div>

ご返信いただきありがとうございます。  
ソースまで記載いただき感謝です。

一度、いただいたソースを使って試してみようと思います。

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/1X/d5c841c3c5a6cb66eed514001c1b45147c9e1f4f.png) [@system](https://community.cybozu.dev/u/system)\
**Post date:** [2025 年 1 月 20 日午前 12:15 UTC](https://community.cybozu.dev/t/topic/9781/5 "2025-01-20T00:15:28Z")

</div>

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。