●テーブル内セルを折り返す試み
経緯
セルの記述が長くなると表全体がはみ出て困るよね
2021/10/14バージョン
※全く美しい解決にはなってないけどひとつの可能性として
style.css.table-block .cell {
white-space: pre-wrap;
max-width: 200px;
vertical-align: top;
} white-space: pre; によって折り返しなしになっているのでそこを変えた幅を決める必要があるのだが…
いい感じに配分する方法とかはあるのかわからないので綺麗にはいかない
試しに
max-width: 200px; にしてみると画像のようになるセルのサイズ（高さ）を他のセルに応じて変える手段はわからない（orない）ので隙間があく
どうにかなった↓
ちょっと改良（column1の位置は上のサンプル画像と違っています）
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; にすれば揃うけどそうすると見た目がよろしくないセルの幅がブラウザ更新時に決定するっぽいのもわからなさを増進している
いや、フォーカスした時に再計算されるか？
列数が多いと右にはみ出る
2022/01/18バージョン
幅に合わせた均等配置には成功した
各行ごとに列数に応じてセル幅が均等になり、各行の列数を合わせれば同じ幅になる
良くも悪くも均等になってしまうので実用的ではなさそう…
2021/10/14バージョンの方がまだ良いかも
tableごとに変えられたらいいけどそうはできないので実装は厳しいな
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はサンプルが見やすくなるように書いたもの