V-data-tableの列幅の固定方法をご教授ください。

2列あるv-data-tableを
幅600px未満で表示(Chrome)した場合、
1列目と2列目が分断され、2列目が次の段に表示されます。

これを、1列目と2列目を段替えせず1行に表示したいです。

以下のサイトなども参考にしましたが、うまくいきませんでした。
[VuetifyのDataTableの列幅を固定にする方法]

補足:v-simple-tableで作成した場合は、1列目と2列目の段替えは発生しませんでした。

なお、画面レイアウトのイメージは以下になります。
▽画面サイズ600px以上の場合
担当者|内容
---+--
Aさん|〇〇
Bさん|××

▽画面サイズ600pxより小さい場合
Sort by (※ソート対象列指定)
--------------
担当者|Aさん
内容 |〇〇
担当者|Bさん
内容 |××

ソースについては以下になります。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuetify Sample</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
    <div id="app">
        <v-app>
            <v-content>
                <v-container>
                    <v-layout>
                        <v-data-table
                            :headers="headers"
                            :items="desserts"
                            hide-default-footer
                            fixed-header
                            calculate-widths
                            height="150px"
                        ></v-data-table>
                    </v-layout>
                </v-container>
            </v-content>
        </v-app>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            vuetify: new Vuetify(),
            data: () => ({
                headers: [
                  { text: '担当者', value: 'name', width: '30%' },
                  { text: '内容', value: 'content', width: '70%' },
                ],
                desserts: [
                    {
                        name: '担当-A',
                        content: '微熱あり、37.1度、食欲がなく、りんご2分の1のみ、せき・鼻水などはなし',
                    },
                    {
                        name: '担当-B',
                        content: '食欲ないみたい',
                    },
                    {
                        name: '担当-C',
                        content: '下痢気味です',
                    },
                ],
            })
        })
    </script>
</body>
</html>
1 Like