tableの大きさを画面のサイズに合わせて調整したい。

tableの大きさを画面のサイズに合わせて調整したい。
文字を改行するのではなく、縦横そのままの比率で画面サイズに合わせて拡大縮小したい。
（合わせて文字の大きさも拡大縮小）
bootstrapのcontainerの幅にtableを収めたい。

table {table-layout: fixed; width: 100%; box-sizing: border-box;}
等試みましたが上手くいかず。

<!DOCTYPE html>
<html lang="ja">

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title>TEST</title>

  <!-- Bootstrap core CSS -->
  <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>
    <div class="container">
        <div class="row">

            <table cellpadding="0" cellspacing="0" class="table table-bordered">
                <tr>
                    <th>1</th>
                    <th>2</th>
                    <th>3</th>
                    <th>4</th>
                    <th>5</th>
                    <th>6</th>
                    <th>7</th>
                    <th>8</th>
                    <th>9</th>
                    <th>10</th>
                    <th>11</th>
                    <th>12</th>
                    <th>13</th>
                    <th>14</th>
                    <th>15</th>
                    <th>16</th>
                    <th>17</th>
                    <th>18</th>
                    <th>19</th>
                    <th>20</th>
                </tr>
                <tr>
                    <td>あ</td>
                    <td>い</td>
                    <td>う</td>
                    <td>え</td>
                    <td>お</td>
                    <td>か</td>
                    <td>き</td>
                    <td>く</td>
                    <td>け</td>
                    <td>こ</td>
                    <td>さ</td>
                    <td>し</td>
                    <td>す</td>
                    <td>せ</td>
                    <td>そ</td>
                    <td>た</td>
                    <td>ち</td>
                    <td>つ</td>
                    <td>て</td>
                    <td>と</td>
                </tr>
            </table>  
        </div>
    </div>
</body>

</html>

Lhankor_Mhy

2021/01/25 03:35

CSSだけでは難しいように思います。

Kokii

2021/01/25 05:04

CSS以外も含めて、改善方法ご教授頂けないでしょうか。

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

回答1件

ベストアンサー

ResizeObserver を使ってみるのはどうでしょうか。

js
1        const outer = document.querySelectorAll('.row');
2        const resizeObserver = new ResizeObserver(entries => {
3            entries.forEach(entry => {
4                const target = entry.target;
5                const inner = target.querySelector('.table-bordered');
6                inner.style.transform = `scale(${target.offsetWidth / inner.offsetWidth})`;
7                inner.style.transformOrigin = `top left`;
8            });
9        });
10        outer.forEach(e => resizeObserver.observe(e));