テーブル要素で画面外にはみ出ているが横スクロールバーが表示されない（横スクロールしたい）

実現したいこと

内容の文字列が画面外（ウィンドウ右）にはみ出している状態で、横スクロールを表示させて内容を確認したい。

前提

下記のサイトを参考に利用させていただいています。
https://web-breeze.net/spreadsheet-htmlview-tool/

現在のソースコードはほぼサイトそのままです。
質問の内容はDOCTYPE htmlのソースコード、126行目になると思います。

発生している問題・エラーメッセージ

テーブルのコンテンツがoverflowしているにもかかわらず横スクロールバーが出現せずウィンドウ表示より右側の内容を確認できません。

該当のソースコード

html
1<!DOCTYPE html>
2<html style="overflow-y:hidden">
3<head>
4  <base target="_top">
5  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
6  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
7  <style>
8    ::-webkit-scrollbar {
9      background: transparent;  
10      height: 10px;
11      width: 8px;
12    }
13
14    ::-webkit-scrollbar-thumb {
15      border: none;
16      background: #bbb;
17      -webkit-border-radius: 8px;
18      border-radius: 8px;
19      min-height: 40px;
20    }
21
22    thead th {
23      position: -webkit-sticky;
24      position: sticky;
25      top: -1px;
26      background-color: #ddd;
27    }
28
29    .btn {
30      position: fixed;
31      width: 50px;
32      height: 50px;
33      color: white;
34      border-radius: 50px;
35      display: flex;
36      justify-content: center;
37      align-items: center;
38      opacity: 0.4;
39      box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
40      transition: 200ms;
41      user-select: none;
42    }
43
44    .btn:hover {
45      opacity: 0.9;
46    }
47
48    .btn:active {
49      opacity: 1;
50    }
51  </style>
52</head>
53<body>
54  <div id="app">
55    <div style="display: flex;">
56      <!-- フィルタエリア -->
57      <div style="
58        width: 300px;
59        height: 100vh;
60        background-color: #fafafa;
61        padding: 0 30px;
62        overflow: auto;
63      ">
64        <!-- タイトル -->
65        <h1 class="title is-4" style="margin-top: 50px;">
66          <span class="material-icons">filter_list</span> 
67          フィルタ
68        </h1>
69        <!-- フォーム -->
70        <template v-for="(key, index) in keys">
71          <div v-if="!isHidden(key)" style="margin-bottom: 1em;"> 
72            <!-- 項目名 -->
73            <label class="label is-small">{{ key.replace(/:.*$/,"") }}</label>
74            <!-- プルダウン（:select["A","B"...] が項目名末尾に付与されていた場合） -->
75            <template v-if="isSelect(key)">
76              <select v-model="conditions[index]" class="select is-small">
77                <option value="">選択なし</option>
78                <option v-for="option in getOptions(key)" :value="option">{{ option }}</option>
79              </select>
80            </template>
81            <!-- ラジオボタン（:radio["A","B"...] が項目名末尾に付与されていた場合） -->
82            <template v-else-if="isRadio(key)">
83              <label for="radio-none">
84                <input type="radio" id="radio-none" value="" v-model="conditions[index]" />
85                選択なし
86              </label>
87              <label v-for="(option, radioIndex) in getOptions(key)" :for="'radio-' + radioIndex">
88                <input type="radio" :id="'radio-' + radioIndex" :value="option" v-model="conditions[index]" />
89                {{ option }}
90              </label>
91            </template>
92            <!-- チェックボックス（:checkbox["A","B"...] が項目名末尾に付与されていた場合） -->
93            <template v-else-if="isCheckbox(key)">
94              <label v-for="(option, checkboxIndex) in getOptions(key)" :for="'checkbox-' + checkboxIndex">
95                <input type="checkbox" :id="'checkbox-' + checkboxIndex" :value="option" v-model="conditions[index]" />
96                {{ option }}
97              </label>
98            </template>
99            <!-- テキストボックス（指定なしの場合） -->
100            <input v-else v-model="conditions[index]" type="text" class="input is-small">
101          </div>
102        </template>
103        <!-- フィルタクリアボタン -->
104        <div
105          @click="initConditions()"
106          class="btn"
107          style="bottom: 30px; left: 220px; background-color: #e85a5a;"
108        >
109          <span class="material-icons">clear</span>
110        </div>
111      </div>
112
113      <!-- データエリア -->
114      <div style="
115        max-width: calc(100% - 300px);
116        height: 100vh;
117        padding: 0 50px;
118        overflow: auto;
119      ">
120        <!-- タイトル -->
121        <h1 class="title is-4" style="margin-top: 50px;">
122          <span class="material-icons">description</span> 
123          <?= title ?>
124        </h1>
125        <!-- テーブル -->
126        <table class="table is-striped is-hoverable" style="white-space: nowrap; position: relative;">
127          <thead>
128            <tr>
129              <th v-for="key in keys">{{ key.replace(/:.*$/,"") }}</th>
130            </tr>
131          </thead>
132          <tbody>
133            <template v-for="record in records">
134            <tr v-if="checkCondition(record)">
135              <td v-for="item in record">{{ item }}</td>
136            </tr>
137            </template>
138          </tbody>      
139        </table>
140        <!-- ダウンロードボタン -->
141        <div
142          @click="downloadCSV()"
143          class="btn"
144          style="bottom: 30px; right: 30px; background-color: #3a93e8;"
145        >
146          <span class="material-icons">file_download</span>
147        </div>
148      </div>
149    </div>
150  </div>
151
152  <!-- Vue.js -->
153  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
154  <script>
155    var app = new Vue({
156      el: '#app',
157      data: {
158        keys: [],         // シートの1行目
159        records: [],      // シートの2行目以降
160        conditions: [],   // 入力した絞込条件
161      },
162      mounted: function(){
163        google.script.run.withSuccessHandler(function(text) {
164          const response = JSON.parse(text)
165          app.keys = response[0];
166          app.records = response.slice(1);
167          app.records.splice();
168          app.initConditions();
169        }).getSheetData();
170      },
171      methods: {
172        // フィルタ条件を初期化する
173        initConditions: function(){
174          this.conditions = app.keys.map((key) => {
175            return app.isCheckbox(key)
176              ? []
177              : ""
178          })
179        },
180        // レコードが全ての絞込条件に合致するかチェックする
181        checkCondition: function(record){
182          for (let i = 0; i < this.keys.length; i++){
183            if ( this.isCheckbox(this.keys[i]) ){
184              if (this.conditions[i].length && !this.conditions[i].includes(record[i])) return false;
185            } else {
186              if ( this.conditions[i] && !record[i].includes(this.conditions[i])) return false;
187            }
188          }
189          return true;
190        },
191        // CSVファイルをダウンロードする
192        downloadCSV: function(){
193          const filename = "data.csv";
194          let data = '\"' + this.keys.join('\",\"') + '\"\r\n';
195          for (const record of this.records){
196            if ( this.checkCondition(record) ){
197              data += '\"' + record.join('\",\"') + '\"\r\n';
198            }
199          }
200          const bom = new Uint8Array([0xef, 0xbb, 0xbf]);
201          const blob = new Blob([bom, data], { type: "text/csv" });
202          const url = (window.URL || window.webkitURL).createObjectURL(blob);
203          const download = document.createElement("a");
204          download.href = url;
205          download.download = filename;
206          download.click();
207          (window.URL || window.webkitURL).revokeObjectURL(url);
208        },
209        // フォームタイプをチェックする
210        isHidden: function(key){ return /^.*:hidden/.test(key) },
211        isSelect: function(key){ return /^.*:select\[.*\]$/.test(key) },
212        isRadio: function(key){ return /^.*:radio\[.*\]$/.test(key) },
213        isCheckbox: function(key){ return /^.*:checkbox\[.*\]$/.test(key) },
214        // シートの項目名末尾に付与した選択肢の配列を返す
215        getOptions: function(key){
216          const param = /:(select|radio|checkbox)\[.*\]$/.exec(key)   // param[0] => ':select["A","B","C"]'
217          const optionsString = /\[.*\]/.exec(param[0])               // optionsString[0] => '["A","B","C"]'
218          return JSON.parse(optionsString[0])                         // return => ["A","B","C"]
219        }
220      }
221    })
222  </script>
223</body>
224</html>

試したこと

Googlechromeで試していますが、edgeでも同様でした。またウィンドウを最大化からウィンドウ化して小さくしても横スクロールバーは表示されません。

テーブル要素のcssでoverflow:visibleにしてフローさせてみましたが変わらず。body要素にもこれに関するstyleの記述はないようです。

補足情報（FW/ツールのバージョンなど）

サイトの作者さんがコメントで丁寧に答えられる方のようですが最近はいらっしゃらないようです。同様にコメントにて、「ページ内にコンテンツを表示したい」旨の記載がありますが、私としてはwhite-space: nowrapで改行しない状態で表示したいと思っています。

cssについて無知なのでどなたか教えていただけると助かります。

Lhankor_Mhy

2023/06/22 03:10 編集

当方の環境ではスクロールバーが表示されました。（Win10 Firefox114 Chrome114）スクロールバーが表示されない環境をもう少し詳しく書いていただけると、解決に近づくかもしれません。なお、どうやら gas を利用しているようでしたので、mounted を削除するなどしてブラウザで動作するようにコードを改変してテストしています。可能性は低そうですが、もしかしたら、そのあたりに原因があるのかもしれません。

行動規範の内容に同意します

回答1件

この回答はGPT-4による自動生成回答です

</div> </div>  <style> .data-area { max-width: calc(100% - 300px); height: 100vh; padding: 0 50px; overflow: auto; position: relative; } .table-wrapper { overflow-x: auto; width: 100%; } </style>  <div class="data-area"> ...  <div class="table-wrapper"> <table class="table is-striped is-hoverable" style="white-space: nowrap; position: relative;"> ... </table> </div> ... </div> ```

この変更により、データエリア内でテーブルが横にはみ出した場合、横スクロールバーが表示されるようになります。

投稿2023/06/22 01:59