テーブルタグで文字数に応じて列の幅を自動で調整したい

テーブルタグで文字数に応じて列の幅を自動で調整したいのですが
table-layout: auto;にしても

table-layout: fixed;で
tr thにautoを設定してもうまくいかないのですが
どうすれば良いでしょうか。。

html
1<!DOCTYPE html>
2
3<head>
4
5  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
6    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
7    crossorigin="anonymous"></script>
8  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
9    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
10    crossorigin="anonymous"></script>
11  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
12    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
13    crossorigin="anonymous"></script>
14
15    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
16
17    <style type="text/css">
18
19      .table-erea{
20        width: 80%;
21        text-align: center;
22        margin: 0 auto;
23      }
24
25      #mtbl.table{
26        table-layout: fixed;        
27      }
28
29      #mtbl tr{
30        width: auto;
31      }
32
33      #mtbl th{
34        width: auto;
35      }
36
37    </style>
38
39</head>
40
41<body>
42  <div class="table-erea">
43    <div class="table-responsive">
44      <table id="mtbl" class="table table-hover">
45        <thead>
46          <tr>
47            <th scope="col">#</th>
48            <th scope="col">あああああ</th>
49            <th scope="col">いいいいいい</th>
50            <th scope="col">ううううううう</th>
51            <th scope="col">ええええええええ</th>
52            <th scope="col">おおおおおおおおお</th>
53            <th scope="col">かかか</th>
54            <th scope="col">きききき</th>
55            <th scope="col">くくくくく</th>
56            <th scope="col">けけけけけけ</th>
57            <th scope="col">こここここここ</th>
58            <th scope="col">さささ</th>
59            <th scope="col">ししし</th>
60            <th scope="col">すすすす</th>
61            <th scope="col">せせせせせ</th>
62            <th scope="col">そそそそそ</th>
63           
64          </tr>
65        </thead>
66        <tbody>
67          <tr>
68            <td><button>aaa</button></td>
69            <td>Otto</td>
70            <td>@</td>
71            <td>@</td>
72            <td>@</td>
73            <td>@</td>
74            <td>@</td>
75            <td>@</td>
76            <td>@</td>
77            <td>@</td>
78            <td>@</td>
79            <td>@</td>
80            <td>@</td>
81            <td>@</td>
82            <td>@</td>
83            <td>@</td>
84                        
85          </tr>
86        </tbody>
87      </table>
88    </div>
89  </div>
90 </body>
91
92</html>