css3 テーブルを半分に切って横に二列に並べたい（行が見切れても同じ高さにしたい）

Question

###前提・実現したいこと
テーブルを半分に切って横に二列に並べたい
cssのtableのプロパティで縦に長いテーブルを真ん中から
二つに分け、左右に並べて表示するプロパティがあったのですが
（そのプロパティだとrowspanが一列目の範囲を超えても二列目に引き継がれた）
マイナーすぎるのか、検索のキーワードが悪いのか検索しても引っかかりません
テーブル内の文字列を折り返す話ばかり出てきます。
詳しい方教えてくだされば幸いです。

markdownでの記法がよくわからず分かりにくい図ですみません
||
|:--|:--:|--:|
|a1|a2|a3|
|b1|b2|b3|
|c1|c2|c3|
|d1|d2|d3|
|e1|e2|e3|
|f1|f2|f3|
|g1|g2|g3|

を

||
|:--|:--:|:--|:--:|--:|
|a1|a2|a3|d1の下半分|d2の下半分|d3の下半分|
|b1|b2|b3|e1|e2|e3|
|c1|c2|c3|f1|f2|f3|
|d1の上半分|d2の上半分|d3の上半分|g1|g2|g3|

こうしたいですmarkdownでは表示出来ませんが、左右とも3.5段の高さになっているイメージです

Answer 1

前の質問の回答にでている column-count でちょうど真ん中になる行も分割されていると思うのですが、どこが思い通りに行ってないのでしょう？

3行目に br で改行があるときも、 rowspan="2" にしたときも上下で分割されて左側も右側も同じ高さになってると思います。

https://jsbin.com/kunapuzigu/2/edit?html,css,output

https://jsbin.com/socezepeto/2/edit?html,css,output

Comments

[moke]

Macだからでしょうか私の使っているブラウザではダメなようです。
そもそもテーブルの中にbrを入れるのはヤバイ気がします

[lazex]

比較的新しいものですし、ブラウザによっては対応していないかもしれません。
私は Windows ですが Chrome で動きましたが Firefox は動きませんでした。
-webkit や -moz のプレフィックスつけると動くかもです。

br がどうヤバイのか知りませんが、HTML的には使えるはずです。
あなたの想定してる table で使うのが難しいかは実際の HTML がかかれてないので判断できません。

[moke]

上半分とは、8ならばoとか品だったら上の口の部分だけとか
2行になっているとかそういうわけでは無いんですよ本当にｄという文字のうえ半分の棒だけが表示されるイメージです。
レスポンシブルデザインで、<br>を挿入していくのはちょっといやですね
そういう意味のヤバイです。

[lazex]

一つの文字が強制的に分割されているということですか。
その考えはなかったです。
私は聞いたことないですが、CSSにそんな機能あるのでしょうか・・・。

[moke]

正確には一回描画されたあとの高さを元に綺麗に二等分されるんです。
これをjsも含めていちいち描くのは面倒いんですよ。