# 【フォームブリッジ】サブテーブルの添付ファイル幅の固定

**URL:** <https://community.cybozu.dev/t/topic/5309>\
**Category:** kintone 開発相談\
**Created:** [2021 年 9 月 28 日午前 2:47 UTC](https://community.cybozu.dev/t/topic/5309 "2021-09-28T02:47:49Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account2408](https://avatars.discourse-cdn.com/v4/letter/l/9de053/32.png) [@Legacy\_Account2408](https://community.cybozu.dev/u/Legacy_Account2408)\
**Post date:** [2021 年 9 月 28 日午前 2:47 UTC](https://community.cybozu.dev/t/topic/5309/1 "2021-09-28T02:47:49Z")

</div>

テーブル内の添付ファイルのフィールド幅を固定したいです。

現在DOM操作で実現をしております。

アップデートにより対応できるコードや簡素なコードをご存じでしたらご指導いただきたいです。よろしくお願いいたします。

```
const className = 'el-upload-list__item-name';
    fb.events.fields.テーブル.fields.添付ファイル.changed = [function (state) {
        const field = document.getElementsByClassName(className);
        //console.log(field); 
        //console.log(field[0].innerText.length); 
        var str = '';
        for (let i = 0; i < field[0].innerText.length / 10; i++) {
            str += field[0].innerText.substr(i * 10, 10);
            str += '<br>';
        }
        //console.log(str);
        field[0].innerText = str;
        field[0].innerHTML = str;
        return state;
    }];

```

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2229](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@Legacy\_Account2229](https://community.cybozu.dev/u/Legacy_Account2229)\
**Post date:** [2021 年 9 月 28 日午前 8:50 UTC](https://community.cybozu.dev/t/topic/5309/2 "2021-09-28T08:50:12Z")

</div>

Kさん

こんにちは。

&nbsp;

アップデートにより対応＝トヨクモ様のメンテナンスによりclass名が変わるなどの場合の対応

という認識で合っていますか？

&nbsp;

例えば、class名指定ではなく、5番目のtd要素の横幅を変えるといったcssはいかがでしょうか。

こちらですと、Kさんがテーブルの列項目を入れ替えない限り、固定できると思います。

そもそもの認識が誤っていたらすみません。

```
/* 5番目のtd要素の横幅を固定 */
td:nth-child(5) {
min-width: 300px;
max-width: 300px;
}

```

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2408](https://avatars.discourse-cdn.com/v4/letter/l/9de053/32.png) [@Legacy\_Account2408](https://community.cybozu.dev/u/Legacy_Account2408)\
**Post date:** [2021 年 9 月 29 日午前 12:39 UTC](https://community.cybozu.dev/t/topic/5309/3 "2021-09-29T00:39:18Z")

</div>

[koichi](https://community.cybozu.dev/hc/ja/profiles/900225082446-koichi)さん、お世話になっております。

ご指導ありがとうございます。

おっしゃる通り、「class名が変わるなどの場合の対応」がないカスタマイズ方法を探しております。

ご提示いただいたcssでやりたいことを実現できました。

文書名が長い場合に「・・・」となってしまうのですが、文書名を折返して表示することはできますでしょうか。

折返しは10文字ごとが業務に適しております。

よろしくお願いいたします。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2229](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@Legacy\_Account2229](https://community.cybozu.dev/u/Legacy_Account2229)\
**Post date:** [2021 年 9 月 29 日午前 3:40 UTC](https://community.cybozu.dev/t/topic/5309/4 "2021-09-29T03:40:11Z")

</div>

Kさん

&nbsp;

先のcssに以下を追加してください。

添付ファイル名が折り返しで表示されます。

&nbsp;

デフォルトでは、white-space: nowrap;となっており、自動折り返しされません。

そのため、この部分を強制的に「normal」に上書きし、折り返しするようにしました。

```
/* 添付ファイル名を全て表示 */
td:nth-child(5) a {
 white-space: normal !important;
}

```

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2408](https://avatars.discourse-cdn.com/v4/letter/l/9de053/32.png) [@Legacy\_Account2408](https://community.cybozu.dev/u/Legacy_Account2408)\
**Post date:** [2021 年 10 月 5 日午前 6:40 UTC](https://community.cybozu.dev/t/topic/5309/5 "2021-10-05T06:40:33Z")

</div>

[koichi](https://community.cybozu.dev/hc/ja/profiles/900225082446-koichi)さん

ご指導ありがとうございます。

こんなに簡単に実現できるのですね。

早速こちらで使用したいと思います。