●テーブル内セルを折り返す試み
経緯
セルの記述が長くなると表全体がはみ出て困るよね
2021/10/14バージョン
※全く美しい解決にはなってないけどひとつの可能性として
https://gyazo.com/d9efa7337ba3b534bfc9f5a38fed9285
code:style.css
.table-block .cell {
white-space: pre-wrap;
max-width: 200px;
vertical-align: top;
}
white-space: pre;によって折り返しなしになっているのでそこを変えた
幅を決める必要があるのだが…
いい感じに配分する方法とかはあるのかわからないので綺麗にはいかない
試しにmax-width: 200px;にしてみると画像のようになる
セルのサイズ（高さ）を他のセルに応じて変える手段はわからない（orない）ので隙間があく
どうにかなった↓
ちょっと改良（column1の位置は上のサンプル画像と違っています）
https://gyazo.com/9400087f6c1c7e7e9b077f15e013c911
code:style.css
.table-block {
display: table !important;
table-layout: fixed;
width: 100%;
}
.table-block .cell {
display: table-cell;
white-space: pre-wrap;
width: auto;
max-width: 200px;
vertical-align: top;
word-wrap: break-word;
}
改良点
セルの高さがちゃんと変わるようになった
残っている問題
ウインドウサイズによってセルの幅がずれることがある
色々いじっている間に一瞬直った気がしたんだけどよくわからなくなった…
padding: 0;にすれば揃うけどそうすると見た目がよろしくない
セルの幅がブラウザ更新時に決定するっぽいのもわからなさを増進している
いや、フォーカスした時に再計算されるか？
列数が多いと右にはみ出る
/icons/水平線.icon
2022/01/18バージョン
https://gyazo.com/76b6e3b8933a2aee2c83546caded11ad
幅に合わせた均等配置には成功した
各行ごとに列数に応じてセル幅が均等になり、各行の列数を合わせれば同じ幅になる
良くも悪くも均等になってしまうので実用的ではなさそう…
2021/10/14バージョンの方がまだ良いかも
tableごとに変えられたらいいけどそうはできないので実装は厳しいな
code:style2.css
.indent.table-block-row {
display: table !important;
table-layout: fixed;
width: 100%;
}
.table-block .cell {
display: table-cell;
white-space: pre-wrap;
word-break: break-all;
box-sizing: border-box;
border: 1px black solid;
}
備考
念の為に書いてみたみたいな記述が入っているので必要かつ十分なコードにはなっていない
borderはサンプルが見やすくなるように書いたもの