回答編集履歴

動的計算のコードを追記

2017/11/26 17:08

投稿

think49

スコア18162

test CHANGED Viewed

@@ -1,3 +1,7 @@
+### calc()
 `calc()` で計算してやれば、**内容の最小幅に反しない範囲で**なら実現可能な気がします。
 動的に要素ノードを追加するなら、`width` プロパティ値も動的に算出してやる必要はあります。
@@ -74,4 +78,346 @@
+### 動的計算のコード
+tableは自動的に等間隔の幅に合わせる為、アスペクト比だけ合わせれば、期待通りに動作するようです。
+下記コードは `width`, `height` 以外のプロパティ値(`border`, `font-size`等)は元の値を維持します。
+必要であれば、`setStyleRule()` の適用範囲を広げて下さい。
+- [動的に表セルの幅/高さを算出する - JSFiddle](https://jsfiddle.net/dsk701fn/)
+```HTML
+<style>
+html, body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+#sample {
+  margin: 0;
+  padding: 0;
+  width: calc(100% - 2px);
+  border: 1px black solid;
+  border-collapse: separate;
+  border-spacing: 1px;
+}
+#sample td {
+  background-color: #eef;
+  border: 1px black solid;
+  text-align: center;
+  vertical-align: middle;
+}
+</style>
+</head>
+<body>
+<form id="table-setting">
+  <p><label>縦横比(縦/横) <input type="number" name="aspect-ratio" value="1"></label></p>
+  <p><label>列数 <input type="number" name="cells-length" value="5"></label></p>
+  <p><label>行数 <input type="number" name="rows-length" value="5"></label></p>
+</form>
+<table id="sample">
+  <tbody>
+    <tr><td></td></tr>
+  </tbody>
+</table>
+<script>
+'use strict';
+(function () {
+  function setStyleRule (doc, selectorText, property, value) {
+    var styleSheets = doc.styleSheets,
+        styleSheetslength = styleSheets.length,
+        i = 0,
+        cssRules, cssStyleRule, cssRulesLength, j;
+    while (i < styleSheetslength) {
+      cssRules = styleSheets[i++].cssRules;
+      cssRulesLength = cssRules.length;
+      j = 0;
+      while (j < cssRulesLength) {
+        cssStyleRule = cssRules[j++];
+        if (cssStyleRule.selectorText === selectorText) {
+          cssStyleRule.style[property] = value;
+          return;
+        }
+      }
+    }
+  }
+  function handleInputAspectRatio (event) {
+    var input = event.target,
+        aspectRatio = input.valueAsNumber,
+        doc = input.ownerDocument,
+        td = doc.getElementById('sample').tBodies[0].rows[0].cells[0],
+        width = doc.defaultView.getComputedStyle(td, '').width;
+    setStyleRule(doc, '#sample td', 'height', parseFloat(width) * aspectRatio + 'px');
+  }
+  function handleInputRowsLength (event) {
+    var input = event.target,
+        length = input.valueAsNumber,
+        tbody = input.ownerDocument.getElementById('sample').tBodies[0],
+        rows = tbody.rows,
+        rowsLength = rows.length,
+        tr;
+    if (length === rowsLength) {
+      return;
+    }
+    if (length > rowsLength) {
+      tr = rows[0];
+      while (rowsLength++ < length) {
+        tbody.appendChild(tr.cloneNode(true));
+      }
+    } else {
+      while (rowsLength > length) {
+        tbody.removeChild(rows[--rowsLength]);
+      }
+    }
+    handleInputAspectRatio({target: input.form.elements['aspect-ratio']});
+  }
+  function handleInputCellsLength (event) {
+    var input = event.target,
+        length = input.valueAsNumber,
+        doc = input.ownerDocument,
+        tbody = doc.getElementById('sample').tBodies[0],
+        rows = tbody.rows,
+        rowsLength = rows.length,
+        tr = rows[0],
+        cells = tr.cells,
+        cellsLength = cells.length,
+        td, df, i;
+    if (length === cellsLength) {
+      return;
+    }
+    if (length > cellsLength) {
+      td = cells[0];
+      df = doc.createDocumentFragment();
+      while (cellsLength++ < length) {
+        df.appendChild(td.cloneNode(true));
+      }
+      i = 0;
+      while (i < rowsLength) {
+        rows[i++].appendChild(df.cloneNode(true));
+      }
+    } else {
+      while (rowsLength) {
+        tr = rows[--rowsLength];
+        i = cellsLength;
+        while (length < i) {
+          tr.deleteCell(--i);
+        }
+      }
+    }
+    handleInputAspectRatio({target: input.form.elements['aspect-ratio']});
+  }
+  function main () {
+    var elements = this.document.getElementById('table-setting').elements,
+        aspectRatio = elements['aspect-ratio'],
+        rowsLength = elements['rows-length'],
+        cellsLength = elements['cells-length'];
+    aspectRatio.addEventListener('input', handleInputAspectRatio, false);
+    rowsLength.addEventListener('input', handleInputRowsLength, false);
+    cellsLength.addEventListener('input', handleInputCellsLength, false);
+    handleInputAspectRatio({target: aspectRatio});
+    handleInputRowsLength({target: rowsLength});
+    handleInputCellsLength({target: cellsLength});
+  }
+  main.call(this);
+}.call(this));
+</script>
+```
 Re: nnahito さん