行いたいこと
table要素で縦横にはみ出た場合、セルの大きさの比率を変えずに縮小し、
画面に収めたい。
質問
テーブルの、セルの大きさの比率を変えずにブラウザの画面に収めたいと考えております。
しかし、以下のようなコードを書いても表示が乱れるだけでした。
html
1<table id="element"></table>
※↑<td>タグは省略
javascript
1$(document).ready(function(){ 2 3 // ウインドウのサイズ 4 let window_width = $(window).width(); 5 6 // セルの幅 7 let cell_width = $('#element td').width(); 8 9 // テーブルの幅 10 table_width = cell_width * 100; 11 12 // テーブルの幅を拡張 13 $('#element').css('width', table_width); 14 15 // 横スクロールの幅取得 16 let scrollsize = document.body.scrollWidth; 17 18 let zoom = window_width / scrollsize; 19 20 // 画面いっぱいになるまで、ズームアウト 21 $('#element').css('transform', 'scale('+ zoom +', 1)'); 22 23});
乱れた感じ
これは何故でしょうか?
利用ブラウザは、
Firefox Developer Edition 58.0b6(64bit)
です。
どのようにすれば縮小がうまくいくか、ご存じの方がいらっしゃいましたらご教示いただけますと幸いです。
追記
HTML/CSS/JSの全文
呼んでいるJSライブラリ
- jQuery
- riot ( http://riotjs.com/ja/ )
- lattice ( https://github.com/nnahito/lattice )
html
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <title></title> 6 <meta charset="UTF-8"> 7 8 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 9 <script src="lattice.js?a"></script> 10 11 <style> 12 13 div{ 14 margin: 5px; 15 } 16 17 #element { 18 border: 1px #e0e0e0 solid; 19 table-layout: fixed; 20 } 21 22 #element td{ 23 border: 1px #e0e0e0 solid; 24 width: 50px !important; 25 height: 50px; 26 text-align: center; 27 vertical-align: middle; 28 } 29 30 .no-place{ 31 background-color: #e0e0e0; 32 } 33 34 </style> 35 36</head> 37 38<body> 39 40 <div> 41 <button id="add_row">行を追加</button> 42 <button id="add_col">列を追加</button> 43 <button id="del_row">行を削除</button> 44 <button id="del_col">列を削除</button> 45 <br> 46 <button id="get_table">中身を取得</button> 47 <br> 48 <label> 49 <input type="checkbox" id="no-place">灰色にする 50 </label> 51 </div> 52 53 <hr> 54 55 <table id="element"> 56 57 </table> 58 59 <hr> 60 <div id="out_json_text"></div> 61 62 63 <script> 64 var $Lattice; 65 66 67 $(document).ready(function(){ 68 69 $Lattice = new Lattice('#element', 'a', 100, 100); 70 $Lattice.initialize(); 71 72 // ウインドウのサイズ 73 let window_width = $(window).width(); 74 75 // セルの幅 76 let cell_width = $('#element td').width(); 77 78 // テーブルの幅 79 table_width = cell_width * 100; 80 81 // テーブルの幅を拡張 82 $('#element').css('width', table_width); 83 84 // 横スクロールの幅取得 85 let scrollsize = document.body.scrollWidth; 86 87 let zoom = window_width / scrollsize; 88 89 // 画面いっぱいになるまで、ズームアウト 90 //$('#element').css('transform', 'scale('+ zoom +', 1)'); 91 // 92 // console.log(scrollsize); 93 // console.log(window_width); 94 // console.log(zoom); 95 96 }); 97 98 99 /** 100 * 行を追加 101 */ 102 $('#add_row').on('click', function(){ 103 $Lattice.addRow(); 104 }); 105 106 107 /** 108 * 列を追加 109 */ 110 $('#add_col').on('click', function(){ 111 $Lattice.addCol(); 112 }); 113 114 115 /** 116 * 行を削除 117 */ 118 $('#del_row').on('click', function(){ 119 $Lattice.removeRow(); 120 }); 121 122 123 /** 124 * 列を削除 125 */ 126 $('#del_col').on('click', function(){ 127 $Lattice.removeCol(); 128 }); 129 130 131 /** 132 * データを保存 133 */ 134 $('#get_table').on('click', function(){ 135 let json = $Lattice.get(); 136 137 $('#out_json_text').text(JSON.stringify(json)); 138 }); 139 140 141 /** 142 * セルがクリックされたとき 143 */ 144 $(document).on('click', '#element td', function(){ 145 146 // 灰色にするボタン 147 if ( $('#no-place').prop('checked') ){ 148 $(this).addClass('no-place'); 149 } else { 150 $(this).removeClass('no-place'); 151 } 152 153 154 155 }); 156 </script> 157 158</body> 159</html> 160
回答2件
あなたの回答
tips
プレビュー